Publié dans Webdesign
Mis à jour le 4 février 2022Admettons-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.
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.
Pour commencer, il va falloir installer l'extension.
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.
On arrive à la partie intéressante. Rendez-vous sur votre page d'accueil, puis cliquer sur "personnaliser".
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".
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 !
Note : Souvent, ce n'est pas une mauvaise police qui coule un site WordPress, mais son manque de visibilité. Si vous le souhaitez, je propose un audit SEO très abordable qui est un excellent point de départ pour travailler là dessus.
Si Easy Google Fonts ne vous convient pas, n'abandonnez pas encore. Je vous présente un autre plugin qui fonctionne de façon simmilaire : WP Google Fonts.
Pour l'installer, suivez les étapes suivantes :
Une fois l'extension activée, vous aurez un nouvel objet "Google Fonts" dans le menu de WordPress. Cliquez dessus.
Pour vous expliquer comment ça marche, je vais prendre un exemple. Nous allons faire en sorte que les titres de niveau 1 (les plus importants) utilisent la police "Bad Script" de Google Font.
Pour ça, nous allons commencé par sélectionner "Bad Script" dans la liste déroulante sous "Font 1".
Ensuite, on laisse le style sur normal puisque Bad Script ne propose rien d'autre. Ici, 400 représente l'épaisseur de la police. Plus ce nombre est grand, plus le texte est gras, comme vous le voyez sur l'exemple ci-dessous.
Enfin, on coche "Headline 1 (h1 tags)" pour appliquer ces réglages au titres de niveau 1. On laisse le reste par défaut.
Si besoin, on peut ajouter du CSS pour affiner les choses, comme par exemple la taille souhaitée pour la police.
Cliquez maintenant sur "Sauvegarder toutes les polices" et le tour est joué ! Si je retourne sur mon site, je vois que mes titres H1 sont maintenant en famille de police "Bad Script".
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.
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.
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.
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.
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.
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 :
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 :
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;
}Sachez que vous pouvez également modifier la taille de la police avec du CSS. Pour définir une taille de 64px pour vos titres de niveau 1, vous pouvez par exemple ajouter le code suivant :
h1{ font-size: 64px;}À 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 :
À 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).
Il existe pleins de plateformes pour trouver des polices originales (souvent payantes) pour votre site.
Le souci avec ces plateformes, c'est que souvent il faut acheter une police à la fois. C'est par exemple le cas sur https://graphicriver.net/fonts c'est super si vous savez exactement ce que vous voulez, mais souvent vous aurez besoin de tester votre police sur votre site pour être sûr qu'elle convient.
Du coup, j'ai personnellement une préférence pour envato elements qui vous donne accès à toute une librairie de polices pour 30€ par mois. Il vous suffit de prendre un mois pour tester plein de polices puis de mettre l'abonnement en pause si vous n'en avez plus l'utilité.
Bien sûr ce conseil n'est pas sponsorisé, c'est juste une astuce pour vous aider 😉
Les polices d'auteurs originales rendront votre site plus "unique" que des polices Google Fonts. En effet, elles sont plus complexes à ajouter à WordPress et sont donc moins utilisées. En plus, il y en a un nombre bien plus grand que ce qui est disponible sur Google Font.
Aujourd'hui, j'aime utiliser une police originale dans chaque nouveau projet. Je trouve qu'elles apportent du style et de la personnalité à un site web, bien plus que des polices standard. Vous pouvez vous référer à la vidéo en haut de page pour savoir comment ajouter une police d'auteur sur WordPress. Ceci dit, voici les 4 étapes pour y arriver en résumé :
Bien sûr vous pouvez faire tout ça sans plugin, mais il faudra que vous soyez à l'aise avec l'idée d'uploader un fichier de police dans votre site à l'aide d'un FTP.
Développé par Brainstorm Force, le plugin Custom Fonts vous permet d'ajouter n'importe quelle police à votre site WordPress facilement. Vous n'aurez pas à connaître la propriété CSS @font-face ou à utiliser le FTP de votre site, youhou 😉
Commencez par installer le plugin comme vous le faites habituellement. Rendez-vous dans votre panneau d'administration WordPress, puis utiliser le moteur de recherche des extensions pour trouver votre bonheur. Une fois le plugin activé, vous pouvez passer à l'étape suivante.
Pour ça, vous pouvez vous rendre sur envato elements que je vous ai présenté plus haut, ou sur un site comme dafont.
Attention aux droits d'utilisation de vos polices ! Respectez le travail des auteurs et vérifiez les licences des polices pour rester dans les clous.
Une fois que vous aurez téléchargé la police de votre choix, assurez-vous qu'elle soit au format woff ou woff2. Si ce n'est pas le cas, vous pouvez utiliser un convertisseur en ligne pour passer votre fichier de police en woff2.
Par exemple, après avoir téléchargé la police "Better Grade" sur DaFont, je n'avais qu'un fichier ".TTF". Je suis donc allé sur https://cloudconvert.com/ttf-to-woff2 pour convertir ce fichier en woff2.
Vous devez maintenant retourner dans votre administration WordPress, dans la section "Apparence". Ensuite, allez dans "Custom Fonts".
Ensuite, il ne vous reste plus qu'à nommer votre police (choisissez un nom sans espace, c'est plus simple), donner une police de secours en cas de problème de chargement, puis téléverser votre fichier woff.
Une fois validée, votre police sera chargée sur chaque page de votre site (voir ci-dessous). Alors attention à ne pas mettre trop de polices en ligne ! Supprimez celles que vous n'utilisez pas.
Maintenant, on passe à la partie un peu technique : il va falloir passer par l'ajout de CSS additionnel. Allez dans le panneau de personnalisation, puis "CSS additionnel".
Vous devrez trouver le sélecteur CSS de ce que vous voulez modifier. Par exemple, si je souhaite modifier un titre, je peux inspecter mon code (ici sur Google Chrome) afin de trouver son sélecteur.
Dans ce cas, le sélecteur est un H2 avec la classe "entry-title".
Le code correspondant sera donc :
Note : pensez à ajuster la taille de la police avec la propriété CSS "font-size" pour que la police reste lisible. Dans l'exemple ci-dessus, elle est bien trop petite !
Si vous utilisez le builder Elementor, il vous sera très facile d'utiliser une police personnalisée sur votre site. Avec le plugin Custom Fonts qu'on a vu plus haut, vous pourrez simplement importer une police et l'utiliser directement dans Elementor.
La nouvelle police sera présente dans les options de typographies des différents blocs d'Elementor.
Lorsque vous téléchargerez une police sur une plateforme comme envato Elements, elle ne sera pas toujours disponible au bon format immédiatement. Pour le web, je recommande le format "woff2" qui est souvent le plus léger.
Souvent, ce format de police n'est pas donné par défaut. La plupart du temps, on vous donne du format "ttf" ou "otf". Il va donc falloir convertir du "ttf" en "woff2". Pour ça, un super outil existe que j'utilise très régulièrement : Cloudconvert. Il vous permet de convertir n'importe quel format de police en woff2 si vous cherchez un peu.
Tout d'abord, merci de m'avoir lu. C'est le premier article type "tutoriel" que j'ai publié sur mon site, et je le tiens à jour depuis plusieurs années maintenant ! Posez-moi vos questions et j'ajouterai peut-être des détails dedans.
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
