fbpx

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 ! 😉

Mise à jour du 29 juillet 2019 en raison du système d’upload de police du Divi Builder qui a été simplifié.

Préparez vos fichiers de polices

Cette section n’est plus utile car il n’est plus nécessaire de convertir ses polices dans différents format.
Néanmoins, je la conserve pour info dans le cas où vous auriez besoin d’effectuer des conversion de fichiers de polices pour une raison ou pour une autre.

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

Mise à jour : le plus simple désormais est de glisser/déposer votre fichier de police directement sur votre site alors que le Visual Builder est actif.

Sinon, 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 au choix un fichier .tff ou .otf (Divi n’accepte plus moult formats de fichiers).
Vous pouvez laisser cocher Tout pour bénéficier des toutes les graisses disponibles.
Cliquez sur Mettre en ligne.

Vous rencontrez une erreur de fichier ?

Lorsque vous cherchez à uploader un fichier .otf, il est possible qu’une erreur apparaisse : “Désolé, ce type de fichier n’est pas autorisé pour des raisons de sécurité”.

Dans ce cas, ouvrez le fichier wp-config.php et ajoutez la ligne suivante :

PHP

Attention : cette ligne de code permet d’autoriser l’upload de n’importe quel format de fichier sur WordPress.
Ceci peut avoir de grave répercutions au niveau de la sécurité de votre site.
Je vous conseille donc fortement de la supprimer une fois que vous aurez uploadé le fichier de police récalcitrant.

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.