Il existe deux méthodes pour ajouter une police personnalisée à son site WordPress avec le thème Divi.

Méthode 1 : A l’aide d’un plugin

L’extension la plus célèbres est Use Any Font.

extension use any font

Etape 1 : Allez sur votre Tableau de Bord > Extension > Ajouter > et entrez Use Any Font dans la barre de recherche. Il est également possible de télécharger le plugin directement sur ce lien puis mettre en ligne l’extension. Ensuite activer le plugin.

Etape 2 : Allez sur le menu de gauche puis cherchez Use Any Font. Il faut rajouter une API Key, dans le premier champ :

tutoriel use any font

Cliquez sur le lien (en bleu), vous serez redirigé vers un site ou il vous sera demandé de faire un don. Si vous souhaitez ajouter une seule police, déplacez le curseur du don à $0 et remplissez les différents champs. Pour utiliser plus d’une police, il faudra faire un don d’un minimum de $10. Une fois que c’est fait, copiez la clé et collez cette dernière dans le champ API KEY puis Verify.

Uploader ensuite votre police qui sera dans l’un des formats suivants : .ttf, .otf, ou .woff

Enfin la dernière étape consiste à assigner votre police à un type de caractère (titre h1, h2, .. paragraphe, etc.). Pour cela allez sur Assign Font.

Puis enfin, cliquez sur Save Settings pour enregistrer.

Methode 2 : Sans plugin

Allez sur le site Google Fonts et cherchez la police que vous souhaitez ajouter. Vérifiez au préalable que la police en question n’est pas déjà présente dans votre thème Divi par défaut.

Une fois sur la page de la police, cliquez sur Select This Font qui se situe en haut à droit en rouge. Une barre apparaît avec la police sélectionnée tout en bas qui devrait ressembler à cette capture :

google font

Copiez la ligne de code du Embed Font et collez celui-ci dans votre thème Divi > Options du Thème > Intégration > et chercher la ligne Ajouter ligne de code à la < head > de votre blog puis Sauvegardez le changement.

Retournez sur la page Google Fonts et copiez le deuxième morceau de code, puis allez à l’onglet Général > Personnalisez CSS. Collez le code dans cet encadré. Il faut maintenant ajouter un petit code autour. Par exemple « p » pour appliquer la police aux éléments paragraphes, ou « h1 » pour appliquer cette police aux titres de niveau 1 et ainsi de suite pour les titres de niveaux suivants. Voici donc le rendu final :

h2{font-family: “Lato”, sans-serif;}

Si vous avez des questions, n’hésitez pas à commenter ci-dessous ou rejoindre notre groupe Facebook 😉