N’étant pas un grand fan de la police de caractère standard utilisée dans l’éditeur d’articles et de pages de WordPress, vous savez cette police façon vieux journaux dont l’ancêtre s’appelle Times, j’ai trouvé un moyen de la modifier.

Mais que l’on soit bien d’accords, je ne parle pas des polices de caractère que verront les visiteur de votre site web, non, je parle bien de la police utilisée pour rédiger un article du coté administration du serveur.

Il y a 2 façon de faire suivant si vous n’utilisez que l’éditeur « Texte » ou si vous utilisez « l’éditeur Visuel » de WordPress pour rédiger.

Si vous utilisez essentiellement l’éditeur Texte de WordPress (1)

…celui où vous voyez tout le code de la page avec plein de « Tags » html ou de Shortcodes, vous pouvez utiliser une extension WordPress  qui s’appelle Admin Font Editor.

Une fois installée et activée, cette extension permet de paramétrer la police et la taille de caractère de l’éditeur WordPress en mode « Texte » (uniquement).

Si vous utilisez l’éditeur Visuel de WordPress (2)

C’est un peu plus compliqué, je ne vous le cache pas… Il va falloir mettre un peu les main dans le code de votre thème, mais vous êtes là pour ça non ?

Première étape, préparer la police que vous aimez pour qu’elle soit disponible dans votre thème wordpress

Suivant le navigateur et l’OS (windows, Mac,…) que l’on utilise pour se connecter sur l’administration d’un site wordpress, il faut une version différente du fichier de police de caractère utilisé. Je ne vais pas rentrer dans ces détails, mais ne vous inquiétez pas, si vous disposé d’une version TTF ou OTF de la police que vous souhaitez utiliser il y un convertisseur sur le web qui va vous arranger le coup: font2web.com

En vous connectant sur font2web.com vous pouvez uploader votre fichier de police ttf ou otf, et récupérer un zip qui contiendra les version .ttf, .otf, .eot, .woff et .svg.

1. Cliquez sur « Browse… » et sélectionnez votre fichier de police caractère (sur votre disque dur)
2. Cliquez sur « Convert & Download » pour récupérer votre zip avec toutes les polices qu’il vous faut pour votre thème wordpress.

Charger les polices de caractère dans le dossier de votre thème

1. Connecter vous sur votre serveur web par FTP
2. Allez dans le dossier de votre thème wordpress : httpdocs/wp-content/themes/[nom du theme]  et créez un dossier « fonts »
3. Copiez le contenu du fichier fonts qui se trouve dans le fichier zip que vous avez récupéré via font2web
   Voici un exemple de mon explorateur FTP avec le dossier fonts qui se trouve dans le dossier de mon thème nommé « Renad »:
   

Créer une feuille de style spéciale pour l’éditeur d’article de wordpress

On va commencer à coder un peu.. mais ce n’est pas compliqué.

Il faut commencer par créer un fichier texte nommé par exemple « editeur-perso-style.css » avec le contenu suivant pour la police « Segoe ui » que j’utilise dans mon exemple:

@font-face {
    font-family: 'Segoe ui';
    src: url('fonts/segoeui.eot');
    src: local('☺'), url('fonts/segoeui.woff') format('woff'), url('fonts/segoeui.ttf') format('truetype'), url('fonts/segoeui.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
body{
    font-family:'Segoe UI', Arial, sans-serif;
}

Dans ce fichier, on commence par déclarer une nouvelle famille de police grâce à la fonction @font-face. Pour plus de facilité, si vous avez converti votre police sur font2web.com vous trouverez un fichier « fonts.css » dans le zip qui contient la première partie de ce fichier texte.

La 2ème partie (body…), indiquera à l’éditeur wordpress que ça police par défaut sera maintenant ‘Segoe ui’ et il utilisera de l’Arial s’il ne la trouve pas.

Enregistrez ce fichier et chargé le via FTP dans le dossier de votre thème wordpress (chez moi c’est le dossier « wp-content/themes/renad »)

Programmer le thème pour qu’il utilise notre fichier de style dans l’éditeur

Dernière étape. Il faut ajouter quelques lignes de code dans le fichier « functions.php » du thème en cours d’usage pour lui dire de charger la feuille de style que l’on viens de créer et de l’appliquer à l’éditeur.

Pour cela:

1. Récupérez le fichier « functions.php » de votre thème en le téléchargeant par FTP vers votre disque dur.
2. Editer le fichier local « functions.php » pour ajouter les lignes suivante à la fin:

   //Polices editeur personalisées
   function ajout_style_editeur() {
       add_editor_style( 'editeur-perso-style.css' );
   }
   add_action( 'init', 'ajout_style_editeur' );

3. Enregistrez le fichier functions.php et chargez le dans le dossier de votre thème wordpress via FTP.

Explications : La dernière ligne indique à wordpress que lors de sont initialisation il devra exécuter la fonction ajout_style_editeur() qui se trouve plus haut.
quand la fonction ajout_style_editeur() se met en marche , elle utilise la fonction « add_editor_style(…) »  qui sert à charger une feuille de style pour l’éditeur (en passant en paramètre le nom du fichier de style css à utiliser).

Le résultat

Voila ce que ça donne sur mon propre site web quand je rédige un article avec la police Segoe UI que je viens d’installer:

Avant

Après

Ajouter les versions gras et italic de votre font dans l’éditeur WordPress

Pour ne pas faire trop compliqué du premier coup, nous n’avons ajouté qu’une version de la police Segoe UI.

Pour ajouter les version grasse et italic, il faudra repasser par font2web.com pour convertir les autres versions et les récupérer.

Dans mon exemple je dispose de 4 variantes de la police:

• segoeui.ttf : version standard
• segoeuib.ttf : version bold (gras)
• segoeuii.ttf : version italic
• segoeuiz.ttf : version italic / grasse

Multiplié par 5 version web (eot, otf, svg, ttf et woff), je me retrouve donc avec 20 fichiers dans le dossier wp-content/themes/[mon theme]/fonts :

segoeui.eot
segoeui.otf
segoeui.svg
segoeui.ttf
segoeui.woff
segoeuib.eot
segoeuib.otf
segoeuib.svg
segoeuib.ttf
segoeuib.woff
segoeuii.eot
segoeuii.otf
segoeuii.svg
segoeuii.ttf
segoeuii.woff
segoeuiz.eot
segoeuiz.otf
segoeuiz.svg
segoeuiz.ttf
segoeuiz.woff

Maintenant il faut ajouter les variantes au fichier CSS en spécifiant pour chaque variante quel est la propriété qui varie : font-weight et font-style.

@font-face {
    font-family: 'Segoe ui';
    src: url('fonts/segoeui.eot');
    src: local('☺'), url('fonts/segoeui.woff') format('woff'), url('fonts/segoeui.ttf') format('truetype'), url('fonts/segoeui.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Segoe ui';
    src: url('fonts/segoeuib.eot');
    src: local('☺'), url('fonts/segoeuib.woff') format('woff'), url('fonts/segoeuib.ttf') format('truetype'), url('fonts/segoeuib.svg') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Segoe ui';
    src: url('fonts/segoeuii.eot');
    src: local('☺'), url('fonts/segoeuii.woff') format('woff'), url('fonts/segoeuii.ttf') format('truetype'), url('fonts/segoeuii.svg') format('svg');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Segoe ui';
    src: url('fonts/segoeuiz.eot');
    src: local('☺'), url('fonts/segoeuiz.woff') format('woff'), url('fonts/segoeuiz.ttf') format('truetype'), url('fonts/segoeuiz.svg') format('svg');
    font-weight: bold;
    font-style: italic;
}
body{
    font-family:'Segoe UI', Arial, sans-serif;
}

Vous remarquerez que dans les déclaration @font-face, la famille est toujours la même ‘Segoe ui’ et que la déclaration ‘body’ n’a pas changée. C’est le navigateur internet qui va se charger de prendre la police normal, italic, bold ou bold/italic suivant le besoin, grâce au indicateur font-weight et font-style.