Auparavant, pour utiliser une police de caractère autre que celles présentes dans la liste proposée par Divi, il fallait soit insérer du code, soit passer par un plugin.
Depuis octobre 2017, une mise à jour de Divi a apporté une fonctionnalité permettant d’ajouter facilement des polices personnalisées à Divi.
Malgré tout, aujourd’hui encore, bon nombre d’utilisateurs ne savent pas vraiment comment procéder… Je vais donc vous expliquer tout ça en détails ! 😉

 

Préparez vos fichiers de polices

L’outil de mise en ligne de polices personnalisées de Divi précise : “Supported File Formats: eot, woff2, woff, ttf, otf”
Ceci ne signifie pas que vous avez le choix entre l’un ou l’autre de ces formats, mais qu’il faut uploader votre police personnalisée dans tous ces formats pour maximiser la compatibilité avec les différents navigateurs.
Il vous faudra donc convertir le fichier de police que vous possédez (bien souvent du .ttf ou de l’.otf) dans les autres formats requis. Pour ceci, je vous conseille le convertisseur de everythingfonts.com que j’utilise depuis des années.

Voici la marche à suivre pour convertir vos polices sur everythingfonts.com

  • précisez que vous avez le droit d’inclure votre police sur des sites en passant le switch de “The EULAs of the font allow Web Embedding (without Adobe Flash)” sur ON
  • cliquez sur Pick Font File et sélectionnez votre fichier de police (pour info : si vous n’êtes pas enregistré sur le site, la limite d’upload est fixée à 400 Ko, sinon elle passe à 2 Mo)
  • cliquez sur Convert et télécharger le fichier ZIP généré
  • ouvrez le ZIP, dedans vous trouverez un dossier “fonts” qui contient les fichiers que vous allez ensuite uploader sur Divi (vous pouvez supprimer le fichier .svg qui n’est pas utile à Divi)

 

Ajoutez vos polices personnalisées à Divi

Tout d’abord, ouvrez ou ajoutez un module Texte, Résumé ou autre sur une de vos pages.
Allez dans Style -> Titre texte et cliquez sur le menu déroulant de Police Titre (vous pouvez aussi le faire avec Style -> Corps Texte -> Police Corps, peu importe).
Cliquez sur Mettre en ligne.

Dans la boite de dialogue qui s’affiche, donnez un nom à votre police personnalisée et sélectionnez les fichiers que vous avez précédemment convertis (.ttf, .otf, .eot, .woff, .woff2).
Vous pouvez laisser cocher Tout pour bénéficier des toutes les graisses disponibles.
Cliquez sur Mettre en ligne.

 

Utilisez une police personnalisée dans Divi

Suite à la manip que vous venez de faire, vous pourrez constater que votre police est immédiatement disponible dans la liste déroulante de Style -> Titre texte ou Style -> Corps texte -> Police Corps

Mais peut-être voudrez-vous l’utiliser pour tous les titres ou pour tout le texte courant de votre site ?

Dans ce cas, laissez le choix de police de la liste déroulante Style -> Titre texte ou Style -> Corps texte -> Police Corps sur “Défaut”, validez les modifications effectuées sur votre module puis celles apportées sur votre page.
Maintenant, ouvrez le Personnaliseur de Thème -> Paramètres généraux -> Typographie et appliquez votre police selon vos souhaits, soit à Police de l'en-tête, soit à Police du corps de texte.
Ainsi, celle-ci correspondra à la police “défaut” utilisée par vos différents modules.

 

Le mot de la fin

Vous savez désormais comment ajouter en quelques minutes une police personnalisée à Divi et l’utiliser où bon vous semble sur votre site.
À l’heure où j’écris ces lignes, il manque encore à Divi la possibilité d’assigner globalement une police différente pour chaque niveau de titre… ce qui simplifierait grandement la personnalisation des styles.

D'autres tutoriels pouvant vous intéresser: