Vous souhaitez ajouter un police personnalisée sur WordPress ? Les polices personnalisées vous permettent d’utiliser une belle combinaison de différentes polices sur votre site web pour améliorer la typographie et l’expérience de l’utilisateur.
En plus d’être esthétiques, les polices personnalisées peuvent également vous aider à améliorer la lisibilité, à créer une image de marque et à augmenter le temps que les utilisateurs passent sur votre site web.
Dans cet article, nous vous montrerons comment ajouter des polices personnalisées sur votre site WordPress en utilisant les polices Google, TypeKit, et la méthode CSS3 @Font-Face.
Remarque : le chargement d’un trop grand nombre de polices peut ralentir votre site web. Nous vous recommandons de choisir deux polices et de les utiliser sur tout votre site web. Nous vous montrerons également comment les charger correctement sans ralentir votre site web.
Avant de voir comment ajouter des polices personnalisées sur WordPress, voyons comment trouver une police personnalisé que vous pouvez utiliser.
Comment trouver des polices personnalisées à utiliser dans WordPress
Les polices de caractères étaient autrefois chères, mais plus maintenant. Il existe de nombreux endroits où l’on peut trouver des polices Web gratuites comme Google Fonts, Adobe Font, FontSquirrel et fonts.com.
Si vous ne savez pas comment faire correspondre les polices, essayez Font Pair. Il aide les concepteurs à associer de belles polices Google.
Lorsque vous choisissez vos polices, n’oubliez pas que l’utilisation d’un trop grand nombre de polices personnalisées ralentira votre site web. C’est pourquoi vous devez sélectionner deux polices et les utiliser dans tout votre design. Cela vous permettra également d’obtenir une certaine cohérence dans votre webdesign !
Ajout d’une police sur WordPress à partir de Google Fonts
Google Fonts est la bibliothèque de polices la plus importante, la plus gratuite et la plus utilisée par les développeurs de sites web. Il existe de multiples façons d’ajouter et d’utiliser les polices Google sur votre site WordPress.
Méthode 1 : Ajout de polices personnalisées à l’aide du plug-in Google Fonts
Si vous souhaitez ajouter et utiliser des polices Google sur votre site web, cette méthode est de loin la plus simple et recommandée pour les débutants.
La première chose à faire est d’installer et d’activer le plugin Easy Google Fonts. Pour plus de détails, consultez notre guide étape par étape sur la façon d’installer un plugin WordPress.
Après l’activation, vous pouvez vous rendre sur la page Apparence >> Personnaliser. Cela ouvrira l’interface de personnalisation du thème en direct où vous verrez la nouvelle section Typographie.
En cliquant sur Typographie, vous afficherez les différentes sections de votre site web où vous pouvez appliquer les polices de Google. Il vous suffit de cliquer sur Modifier la police sous la section que vous souhaitez modifier.
Dans la section Famille de polices, vous pouvez choisir n’importe quelle police Google que vous souhaitez utiliser sur votre site web. Vous pouvez également choisir le style de police, la taille de la police, le remplissage, la marge, etc.
En fonction de votre thème, le nombre de sections peut être limité et vous ne pourrez peut-être pas modifier directement le choix de la police pour de nombreuses zones de votre site web.
Pour remédier à cela, le plugin vous permet également de créer vos propres contrôles et de les utiliser pour changer les polices de votre site web.
Tout d’abord, vous devez vous rendre sur la page Paramètres de Google Fonts et donner un nom à votre contrôle de police. Utilisez quelque chose qui vous aide à comprendre rapidement où vous utiliserez cette police.
Ensuite, cliquez sur le bouton Créer un contrôle de police (create font control) et il vous sera demandé d’entrer les sélecteurs CSS.
Vous pouvez ajouter des éléments HTML que vous souhaitez cibler (par exemple, h1, h2, p) ou utiliser des classes CSS.
Vous pouvez utiliser l’outil Inspecter de votre navigateur pour savoir quelles classes CSS sont utilisées par la zone particulière que vous souhaitez modifier.
Cliquez maintenant sur le bouton Enregistrer (save font control) pour enregistrer vos paramètres. Vous pouvez créer autant de contrôleurs de polices que vous le souhaitez pour les différentes sections de votre site web.
Pour utiliser ces contrôleurs de police, vous devez vous rendre dans la section Apparence >> Personnaliser et cliquer sur l’onglet Typographie.
Sur Typographie, vous verrez également une option Typographie du thème (theme typography). En cliquant dessus, vous verrez les contrôles de police personnalisés que vous avez créés précédemment. Il vous suffit maintenant de cliquer sur le bouton Modifier pour sélectionner les polices et l’apparence de ce contrôle.
N’oubliez pas de cliquer sur le bouton Enregistrer ou publier pour enregistrer vos modifications.
Méthode 2 : Ajout manuel de polices Google sur WordPress
Cette méthode exige que vous ajoutiez du code à vos fichiers de thème WordPress.
Tout d’abord, visitez la bibliothèque de polices de Google et sélectionnez une police que vous souhaitez utiliser. Ensuite, cliquez sur le bouton d’utilisation rapide situé sous la police.
Sur la page des polices, vous verrez les styles disponibles pour cette police. Sélectionnez les styles que vous souhaitez utiliser dans votre projet, puis cliquez sur le bouton de la barre latérale situé en haut de la page.
Ensuite, vous devrez passer à l’onglet Intégration (embed) dans la barre latérale pour copier le code d’incorporation.
Vous pouvez ajouter ce code à votre site WordPress de deux façons.
Premièrement, vous pouvez simplement éditer le fichier header.php de votre thème et coller le code avant la balise <body>.
Cependant, si vous n’êtes pas familier avec l’édition de code dans WordPress, vous pouvez utiliser un plugin pour ajouter ce code.
Il suffit d’installer et d’activer le plugin Insert Headers & Footers. Pour plus de détails, consultez notre guide étape par étape sur la façon d’installer un plugin WordPress.
Après l’activation, allez à la page Paramètres >> Insert Headers & Footers et collez le code d’intégration dans la case Scripts in Headers.
N’oubliez pas de cliquer sur le bouton Enregistrer pour enregistrer vos modifications. Le plugin va maintenant commencer à charger le code d’intégration de la police Google sur toutes les pages de votre site web.
Vous pouvez utiliser cette police dans la feuille de style de votre thème comme ceci :
.h1 site-title { font-family: 'Open Sans', Arial, sans-serif; }
