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 :
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.
Bonjour
Merci pour ce tuto.
Petite question : la police est uploadée dans quel dossier du serveur ?
Merci.
Cdlt
Bonjour Giuseppe,
tu pourras trouver les fichiers dans /wp-content/uploads/et-fonts 😉
Super tuto.
La question est de savoir s’il serait plus judicieux de le faire systématiquement en dehors des polices système pour éviter les requêtes fonts.googleapis.com fonts.gstatic.com qui ralentissent. Une idées?
Il faudrait presque faire des tests de vitesse de chargement sur même site, avec d’un côté uniquement des fonts issues de Google Fonts et de l’autre uniquement des fonts téléchargées.
À mon avis, l’un dans l’autre c’est du pareil au même…
Bonsoir,
Merci mille fois pour ce tutoriel qui me sort de 12h d’arrachages de cheveux… MAIS aussitôt résolu, un nouveau pb se profile !!!
J’ai assigné ma nouvelle police au menu primaire, ça marche lorsque je suis sur la home page (construite avec le divi builder).
En revanche, si je clique sur l’un des onglets du menu primaire qui m’amène sur la page d’archives d’une de mes catégories, la police du menu primaire n’est plus celle que j’ai spécifiée dans le personnaliseur, mais une horrible police énorme qui sort de je ne sais ou !
Cette manip d’ajout de police en glisser-déposer n’est valable que sur les pages où le builder est “activé” ? Est-ce un problème de mémoire cache (je crois pourtant l’avoir vidée) ? Est-ce par ce que je tombe sur une page d’archives ? Je suis perdue à nouveau :-D. Please, help !
Salut Sarah, normalement la police est valable partout. Essaye de vider ton cache. Tu peux nous donner l’URL pour qu’on voit le site?
Bonjour,
Merci pour ce tuto clair et très utile 🙂
Par contre, dans Personnaliseur de Thème -> Paramètres généraux -> Typographie, il ne me propose pas les différents types de graisse et se met en italic par défaut !! Pourtant, j’ai bien les différentes graisse sur les modules. Avez vous une solution ?
Belle journée
Bonjour, ta version de Divi est à jour? Pour modifier l’épaisseur de la police il faut le faire ensuite dans le personnalisateur de module si tu souhaites le globaliser sur ton site.
Sabrina, vérifie également qu’il n’y a pas une règle dans ta feuille de styles qui définit déjà les attributs globaux de ton texte.
Bonsoir, merci pour ce tuto, cela m’a bien aidé pour récupérer une police que demandait le client. Bonne soirée.
Bonjour,
merci pour ce tuto qui m’a bien aidé. J’ai malheureusement un problème avec ma nouvelle police. Sur mon mac pas de souci, sur mon pc aussi. Par contre sur mon iphone elle ne s’affiche pas. et apparemment sur d’autres ordinateurs non plus (j’ai eu plusieurs retours de visiteurs).
Faut-il que je code quelque chose dans mon header ?
Bonjour,
tu as bien suivi toute la procédure?
Bonjour,
Merci pour pour toutes ces explications.
J’ai cependant une question.
J’ai autant de fichier(ttf) que de graisse de police :
Bold-Italic
Bold
ExtraLight-Italit
Extralight
…
10 en tout
Du coup, après conversion, j’ai 4 fichiers par graisse (eot, ttf…), soit 40. Dois-je les intégrer séparément(par groupe de 4) selon la graisse, et donc les intégrer comme des font différentes ?
J’ai essayé d’intégrer les 40 d’un coup mais à la fin, j’en ai qu’une d’utilisable.
Qu’en pensez-vous ?
Merci
Bonjour ! Impossible d’intégrer une nouvelle typographie dans DIVI.
lorsque j’applique style/ police / “mettre en ligne” mon écran devient blanc.
DIVI version 3.25.2
Avez-vous un conseil pour intégrer une typographie d’une autre manière ?
Merci
Tu dois avoir un problème de configuration au niveau de ton serveur. Vérifie dans les “options de Divi -> Support Center” que le rapport est correct.
Ou une incompatibilité avec un plugin… essaye, toujours dans les options de Divi de passer en “Safe Mode” pour désactiver tous les plugins.
Bonjour, j’ai moi aussi ce problème. (font qui marche que sur la page d’accueil)
Cela ne viens pas du cache, c’est comme si les autres pages n’appelaient pas les custom font. Toutes les autres polices par défaut marche…
J’ai ce problème à chaque fois, sur tous les sites que j’ai pu faire.
Je pense que c’est mieux de mettre une font manuellement sur le site.
Bonjour,
as-tu des erreurs dans l’inspecteur de code?
Non, il n’y a pas d’erreurs, mise à part l’avertissement :
“A cookie associated with a cross-site resource at was set without the `SameSite` attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at and .”
Mais je pense que ça n’a aucun rapport.
Toujours ce problème, je vais essayer de charger la font dans style.css du thème enfant. De cette manière il sera normalement présent sur toutes les pages.
Très bizarre quand même, le code css est là mais c’est comme si divi n’appelait pas correctement la font sur les autres pages.
J’ai trouver et effectivement il y a bien un problème avec Divi sur mon site…
Quand je vais sur une page avec les fonts non chargées, que je vais dans le module texte et que je passe la souris au dessus d’une font personnalisée elle se charge, mais les modification et le chargement de la font seront reset à l’actualisation de la page. (En enregistrant les modification bien sur)
J’ai enregistré le phénomène sur youtube :
https://www.youtube.com/watch?v=feS-3FGoHOg
Les custom fonts se charge au passage de la souris dans le module texte, mais à l’actualisation, les fonts ne sont plus chargées… 🙁
Je t’invite à venir en parler sur notre groupe Facebook en partageant l’URL de ton site.
Merci ça marche! …. sauf que ça ne marche que sur mon iphone et pas sur mon ordinateur (j’ai essayé avec un mac et un pc)🤔😵
Une idée?
Hello, tu es sur que tu n’as pas un soucis de cache? Il n’y a aucune raison que ça ne fonctionne pas.
J’ai “résolu” mon problème en utilisant une police de Divi directement.
Faudra que je me re-penche dessus par contre.
Le cache non.
J’avais nettoyé le cache de WordPress et de mon navigateur, j’avais même essayé depuis plusieurs ordinateur mais non.
“Cyrielle” tu as surement le même problème que moi.
C’est du peut être à un conflit de plugin si on est les seul à avoir ce problème. 🙁
Bonjour Julien et merci d’avoir répondu si vite 🙂
Je viens de faire l’essai mais aucun changement
Par contre j’ai remarqué que ça marche sur Safari (mais pas Firefox et chrome)
Merci Mathieu, oui c’est ce que je vais finir par faire. Bien que, en étant passé une graphiste pour obtenir ma charte graphique, j’avoue que ça m’embête pas mal…
Bonjour, super tuto, j’ai installé mes typos tout fonctionnait très bien depuis plusieurs jours et puis maintenant mon site affiche des typos qui n’ont rien à voir. Et pourtant dans le builder c’est ok. Je n’y comprends plus rien, une idée ?
J’ai juste intallé NextGEN gallery mais je l’ai supprimer quasiment aussitot. (Si ça peut aider).
Je n’y comprends plus rien…
D’avance merci.
Bonjour, super tuto merci. Par contre j’ai un soucis depuis que je suis passé en https mes typo ne se voient plus, dans la console chrome il m’indique que mes typo sont bloquées.
Si vous avez une solution je suis preneur.
Merci, bonne journée.
Peut-être un souci de cache ? Vide bien tous les caches : navigateur, plugin de cache, plugin de sécurité…
Ça arrive parfois… Essaye de modifier tes URLs avec un plugin de rechercher/remplacer.
Si ça ne fonctionne pas, alors soit un peu plus radical et supprime puis réimporte tes polices.
Bonjour,
n’ayant pas réussi à charger ma nouvelle police via fontface, votre solution est mon ultime recours!
Seulement, il y a un hic, je n’ose pas modifier le fichier wp-config de peur de tout faire bugger! Où ajouter cette ligne? A la toute première ligne? Cela ne créera pas d’incidence sur le site? A la toute fin de ce fichier, il est indiqué “/* C’est tout, ne touchez pas à ce qui suit ! Bonne publication. */”. Cela me fait donc peur d’ajouter cette ligne de code aussi tout à la fin.
Merci d’avance pour votre aide
Oui, ajoute la ligne juste avant “C’est tout…” et retire-la quand tu as uploadé ta police.
Si tu as un doute, fait une copie de ton fichier wp-config avant de le modifier.
Salut l’équipe DIVI Community
Savez-vous s’il est désormais possible d’assigner globalement une police différente pour chaque niveau de titre? Une astuce?
Cyrielle
Oui, via les options globales d’un module “texte” par exemple (l’icone en forme de globe terrestre à droite du module).
Merci pour le tuto !
Je rencontre seulement un problème avec ma police personnalisée : j’ai réussis à la rajouter via l’interface Divi et je peux la sélectionner pour n’importe quel bloc de texte. Le changement de police est visible depuis mon interface Admin, mais quand je passe en mode visiteur c’est une autre police qui apparait par défaut…
J’ai vidé les caches de Divi et de mon navigateur mais il n’y a rien à faire, la police ne s’affiche pas. Auriez-vous une idée de piste ?
Merci d’avance.
Tu peux essayer d’uploader le .ttf + le .otf.
Vois aussi dans les “Options de Divi -> Avancé -> Créateur” de désactiver “Génération de fichiers CSS statiques”.
Bonjour,
Dans un premier temps merci pour ce tutoriel.
J’ai une question qui a déjà posé au dessus mais dont je ne trouve pas la réponse, j’ai autant de fichiers (ttf) que de graisse de police :
– Thin
– Regular
– Bold
– Extra Bold
– …
Cependant, je ne peux intégrer qu’un fichier lors de l’ajout. Savez-vous comment faire, existe-t-il une solution ou faut-il créer autant de police que de fichier que j’ai ?
En espérant être clair
Merci
Tu peux ajouter autant de polices que tu le souhaites, par contre je te conseille de te limiter à 1 ou 2 fichiers car il faut garder à l’esprit que ça fait des ressources supplémentaires à charger à chaque fois.