Comment changer la police de caractère sur WordPress ?

Par Baptiste Pagès
Dernière mise à jour le 6 novembre 2018

Admettons-le. WordPress est génial, mais les thèmes ne vous permettent pas toujours de changer la police facilement, c’est même souvent un casse-tête. Alors posons-nous la question : comment changer la police de son site WordPress sans devenir fou ? Regardons ça ensemble.

Changer la police de votre site WordPress avec un plugin

L’une des grandes forces de WordPress est son système de plugins. La solution la plus simple pour changer la police de votre site WordPress est donc de passer par un plugin. Plusieurs choix s’offrent à vous, mais nous allons ici utiliser Easy Google Fonts.

Installation du plugin « Easy Google Fonts »

Pour commencer, il va falloir installer l’extension.

  • Rendez-vous dans votre panneau d’administration WordPress, puis « Extensions » et « Ajouter ».
  • Ensuite, tapez « Google Fonts » dans le champs de recherche à droite.
  • Dans les premiers résultats, le plugin « Easy Google Fonts » devrait apparaitre. Cliquez sur « Installer », puis activez le plugin.

Trouver le bon plugin pour changer la police de votre site WordPress - Capture d'écran

Une fois l’extension activée, elle apparaîtra dans les réglages. Vous pouvez obtenir des réglages avancés dans « Réglages » > « Google Fonts » mais nous n’irons pas là bas dans cet article.

Changement de la police de caractère

On arrive à la partie intéressante. Rendez-vous sur votre page d’accueil, puis cliquer sur « personnaliser ».

Trouver le bouton Personnaliser sur WordPress - Capture d'écran

Le panneau latéral s’ouvre, rendez-vous dans « Typography » > « Default Typography ».

Nous allons voir comment changer la police des titres principaux (ou titres de niveau 1) dont le code HTML est « h1 ». Pour y arriver, cliquez sur « Edit Font » sous « Heading 1 ». Un tas d’options s’affiche. L’option qui nous intéresse est « Font Family ». Dans cette liste déroulante, choisissez la police qui vous plaît. Pour l’exemple, prenons « Josefin Sans ».

Vous pouvez également gérer l’épaisseur et le style de la police juste en dessous, dans la liste déroulante « Font Weight/Style ».

Comment changer la police des h1 sur WordPress avec le plugin Easy Google Fonts - Capture d'écran

Pour finir, n’oubliez pas de sauvegarder votre nouveau réglage de police en cliquant sur « Publier ».

Félicitation, vous savez maintenant comment changer la police de caractère de votre site WordPress !

Comment changer la police à la main, en CSS

Vous n’êtes pas obligé d’utiliser un plugin pour modifier la police de votre site, tant que vous pouvez éditer son code CSS. Dans cette section, voyons comment modifier le titre de niveau 1 en « Josefin Sans » avec une épaisseur de 100 en utilisant uniquement le CSS.

Pourquoi utiliser le CSS pour changer la police de son site ?

Utiliser du code CSS alourdira largement moins votre site que d’utiliser un plugin. La vitesse d’un site étant un facteur très important pour le visiteur, il est logique de s’en préocuper. Si votre site a déjà beaucoup de plugins, il vaut sûrement mieux pour vous utiliser du code CSS directement.

Modifions la police de votre site en CSS

Pour commencer, il faut parvenir à ajouter du code CSS à votre site WordPress. Pour ça, rendez-vous sur l’accueil et cliquez sur « Personnaliser ». Ensuite, choisissez « CSS Additionnel » dans la barre latérale gauche.

Trouver l'onglet CSS Additionnel sur WordPress - Capture d'écran

Dans la zone d’édition qui vient de s’ouvrir, vous allez pouvoir écrire du code CSS. Mais d’abord, il faut aller trouver le code pour importer la police recherchée : « Josefin Sans ».

Pour ça, rendez-vous sur https://fonts.google.com/ et tapez « Josefin Sans » dans le champ de recherche. Lorsque Josefin Sans apparaît dans les résultats, sélectionnez-la en cliquant sur le « + » rouge.

Utiliser Google Fonts pour trouver des polices pour WordPress - Capture d'écran

Maintenant, un petit onglet est apparut en bas à droite de votre écran. Cliquez dessus (Family Selected) puis sélectionnez l’option @IMPORT.

Ici, deux lignes de codes nous intéressent.

  • La première commence avec « @import », elle nous servira à importer la police pour qu’on puisse l’utiliser sur le site.
  • La seconde commence avec « font-family », elle nous servira à appliquer la police à certains éléments du site.

Utiliser @import de Google Fonts pour importer une police - Capture d'écran

Commençons par importer la police pour pouvoir l’utiliser par la suite. Pour ça, copiez la première ligne, qui commence avec @import, puis collez-la en haut de votre code CSS comme ci-dessous :

Changer la police d'un site WordPress avec @import - Capture d'écran

La police est maintenant importée dans le système. Comme prévu, appliquons-la au titre principal. En HTML, le titre principal est la balise h1. Il faut donc appliquer la police à la balise h1. Pour ça, copiez la seconde ligne de code, et collez-la comme ci-dessous :

Comment changer la police d'un h1 en Josefin Sans en CSS sur WordPress - Capture d'écran

Au final, on a donc ajouté ce code CSS au site :

@import url(‘https://fonts.googleapis.com/css?family=Josefin+Sans’);

h1{ font-family: ‘Josefin Sans’, sans-serif;}

Quelques règles à suivre lors du choix de vos nouvelles polices

À présent, vous savez comment changer la police de votre site WordPress, avec un plugin ou directement en CSS. C’est un grosse responsabilité que vous prenez sur vos épaules, car la police est très importante dans votre site.

Après tout, un site est fait pour présenter des informations, et la police impactera tous vos textes. Vous n’êtes certainement pas designer, alors voici quelques règles à suivre pour éviter de rendre votre site moche en retouchant les polices :

  1. Le texte doit être parfaitement lisible. Ne demandez pas à votre lecteur de faire des efforts pour lire le texte, ou il ira voir ailleurs. Essayez de lire votre texte de loin, ou demandez à votre chère mamie si elle arrive à lire le texte sans avoir à zoomer.
  2. Jamais plus de deux polices sur le site : une pour les titres et une pour le corps, c’est tout. Ajoutez-en et vous rendrez votre site brouillon, vos efforts seront contre-productifs.
  3. Essayez de choisir une police de titres qui soit dans le ton de votre site n’utilisez pas une police « féminine » pour un site au public masculin un peu macho par exemple, ou un police « handwriting » pour un business très sérieux comme un cabinet d’avocat.

À gauche, une police hors-sujet.

Petite astuce pour éviter une gaffe de police : commencez par choisir la police de votre titre, puis passez voir les associations habituelles à la fin de sa page Google Fonts pour avoir des idées (exemple avec Josefin Sans).

Le mot de la fin

Tout d’abord, merci de m’avoir lu. C’est le premier article type « tutoriel » que je publie sur mon site, alors n’hésitez pas à me dire ce que vous en pensez en me contactant (contact@baptistepages.com).

Ensuite, retoucher son site par soi-même ira un moment, mais rien ne vaut un bon site web professionnel pour prouver votre sérieux, booster votre visibilité et obtenir de nouveaux clients grâce au web. Je réalise ce genre de sites pour les entreprises, alors n’hésitez pas à fouiller mon site pour plus d’informations, ou à me contacter directement.

Très bonne journée à vous 🙂

Baptiste