Divi Tips 101 : polices personnalisées

Divi custom fonts: how do they work?

Published on 09/09/2020 | 49 comments

2,320 words

9

A Divi custom font is a font that is not natively available within the Divi editor or even the WordPress editor (Gutenberg). However, depending on your project or that of your client, it is likely that you will have to use specific fonts that have been custom-made for the project or that have been purchased on a dedicated platform. This is a far cry from the eternal Google Fonts that are everywhere.

In this article, I will explain how to implement a custom font in your Divi projects. You will see that there are several ways, some simple and some more complex.

Announcement: this article contains affiliate links that you will easily recognise. The classic links are in purple and sponsored links are in pink.

1 - Why use a custom font in Divi?

Not all web projects look the same, or at least shouldn't look the same... That's why using a custom font - also called Custom Font - is a good starting point to differentiate your site from "common" sites.

A customised font allows you to fit in perfectly with your corporate identity. For example, the font used for your logo could be used on your website. In this way, a homogeneity is created between your various communication supports.

Did you know that you can test Divi for free? Go to this page and click on "TRY IT FOR FREE

2 - Font formats for the Web

Font files are available in several formats that are supported more or less well by browsers (Chrome, Firefox, Opera, Safari...).

TTF (TrueType Font) and OTF (OpenType Font) are the best supported font formats:

Browser versionEOTOTF/TTFWOFFWOFF2SVG
IE 8x
IE 9 to 11xxx
EDGE 12 to 14xx
FIREFOX 40 to 45xxx
CHROME 43 to 49xxx
SAFARI 8 to 9xxx
OPERA 32 to 35xxx
iOS SAFARI 8.4 to 9.1xxx
ANDROID 4.4 to 44xx
CHROME for Android 46xxx
Compatibility of font formats across browsers (source).

So according to this table, you understand that depending on the font files you import into your site, some browsers will not be able to interpret them.

For example, if you import fonts in EOT or SVG format, very few users will see them.

The solution would be to import all font formats into your site so that all your users can benefit.

If you don't have all these formats, you will just have to generate them via FontSquirrel (we will see that later). But in practice, if you use TTF or OTF fonts, this should be more than enough(who uses Internet Explorer anymore? Seriously! I haven't touched it since 1998).

The other solution, which is more of a fallback, is to specify in your code the basic fonts that should be supported by the browser in case it fails to display your custom font. For example, you could specify Arial, Times New Roman, Verdana, Cursive, etc.

Don't delay! Discover the Divi theme here !

3 - Custom font vs Google Font

Here's a question you might ask: why bother using a custom font when most WordPress themes, including Divi, allow you to use the Google Fonts catalogue?

It is true that the choice is vast and it is rare not to find something to suit your needs with the multitude of fonts available. However, most of them are seen and seen again. But there is another point to be made: confidentiality.

Indeed, using this service, the Google Fonts API provides the fonts requested when visiting a web page from Google's servers. This is stored in your visitor's browser cache and is updated as necessary. As a result, Google retrieves the IP address of your visitor, which is nothing more than personal data. In this case, the GDPR should be respected and you should obtain the visitor's consent to display your fonts.

Using Google Font is not illegal, but your privacy policy page should inform your visitor of this, as required by the GDPR. You should also link to Google's privacy policy. To learn more about this, I recommend that you read this detailed article.

It is also for these reasons that Divi offers to disable Google Font s for your project:

Desactiver Google Fonts Divi
Disabling Google Fonts in Divi

To disable Google Fonts in Divi, simply go to the Divi tab > Theme Options > General and uncheck the option to use Google Fonts.

If you decide to do without this service, you will certainly need the rest of this article...

4 - Where to find custom fonts?

There are lots of sites to find custom fonts but remember to respect copyright. Indeed, free fonts are not necessarily free of rights, that's the first thing to remember.

Secondly, you should know that there are premium fonts, i.e. fonts that have to be paid for. In this case, be sure to refer to the licence of these fonts because some can be used in your commercial projects and others only in your personal projects. So, make sure you get the right information.

Finally, here is a list of sites where you can find beautiful fonts:

On the Web, it is quite common to use a classic font for the body text and a slightly more sophisticated font for your headline fonts. Sites like Typespiration or FontJoy s help to find the right balance between the two.

plus de ressources pour Divi

5 - Custom font via the Divi Builder

This is the easiest option! Once you have found your ideal font(s) and have their files, here are the steps to install them in Divi :

5.1 - Be in possession of at least the .ttf and .otf files

Depending on the platforms on which you have found your fonts, you may be in possession of a font in .ttf or .otf format. To be on the safe side, you should have both, at least you are safe...

So if you only have one of two, you can use a :

Convertir une police TTF en OTF
Convert OTF to TTF with Convertio.co
  1. Go to the converter Convertio.co and upload your TTF or OTF file. For my example, it is AlexBrush-Regular.ttf.
  2. Choose the format into which this file should be converted. In my case, I choose OTF because I already have the TTF file.
  3. Confirm by clicking on Convert.
  4. Upload your file, you will need it...

You now have the OTF and TTF files.

5.2 - Importing custom fonts via the Divi Builder

The rest of the process is simple:

Insérer des Polices Personnalisées Divi
Importing fonts into the Divi Builder
  1. Open a publication (page or article) with the Divi Builder and insert a Text module. Go to the Style tab to set the font by clicking on the drop-down menu.
  2. In the drop-down menu, choose "Go online".
  3. Choose the files for the custom font. Also remember to name your font. For my example, I named it Alexa.
  4. Import at least the OTF and TTF files.
  5. Validate by clicking on upload.

Your custom font should now be functional...

5.3 - Setting a default custom font

Now that you have your custom font, you could make it the "default" font for your entire site.

This way, you don't have to define your new font every time you use the Divi Builder, saving you a lot of time.

Police Par Defaut
Define fonts for the entire site.

Simply go to the Appearance > Customise > General Settings > Typography tab and select your new font. You can set your font for all the headings on your site (header font) as well as your font for the body of the site.

5.4 - Problem importing your font into Divi

Probleme Import Police Divi
Problem importing custom font into the Divi Builder

It may happen that you are unable to import your custom font into the Divi Builder, which shows :

"Sorry, this type of file is not allowed for security reasons.

There are two ways to correct the problem:

5.4.1 - Solution 1: correct via wp-config.php

If you are comfortable with WordPress, your server and your FTP software, all you have to do is edit the wp-config.php file at the root of your site and write the following line of code at the end of the file:

define('ALLOW_UNFILTERED_UPLOADS', true);
Wp Config Fichier
Edit the wp-config.php to allow custom font imports into Divi

Please note that for security reasons, you should delete this line of code as soon as you have finished importing your custom fonts into Divi!

5.4.2 - Solution n°2: correct with an extension

If you are not at all comfortable with handling files within your server, then you should use a dedicated :

Autoriser Ttf Otf WordPress
Allow OTF and TTF files in WordPress
  1. Go to the Extensions tab > Add and search for the extension Mime Types Plus. Install and activate it.
  2. Go to the Mime Types Plus tab > Edit Mime Type.
  3. To allow OTF files: note otf in the extension field, font/otf in the Mime Type field and choose Document as the file type.
  4. To allow files TTF files: note ttf in the extension field, font/ttf in the Mime Type field and choose Document as the file type.

Now you can start the import again (step 5.2 of this article) and you should not have the problem again.

6 - Custom font in a child theme (@font-face method)

There is another way to implement a new font in your WordPress site, and that is the @font-face method. This works for any theme, not just Divi.

You simply need to add your custom font files within your child theme and add a few lines of code to its style.css file.

Font Squirrel Converter
Converting fonts with FontSquirrel
  1. Go to the official website of FontSquirrel and upload the file of the custom font you have (e.g. OTF or TTF).
  2. Select the mode EXPERT.
  3. Check all file formats.
  4. Leave the other options as they are and accept the terms and conditions. Click on DOWNLOAD YOUR KIT.
  5. You now have a folder containing several files. Select the 5 font formats (EOT, SVG, TTF, WOFF and WOFF2) and place them in the root of your Divi child theme.
Css Divi Police
CSS style sheet for custom fonts
  1. Then open the style.css file of your child theme and place in it the code contained in the stylesheet.css file provided by FontSquirrel. This code looks like this:
@font-face {
    font-family: 'goldie_rainbowregular';
    src: url('goldie_rainbow-webfont.eot');
    src: url('goldie_rainbow-webfont.eot?#iefix') format('embedded-opentype'),
         url('goldie_rainbow-webfont.woff2') format('woff2'),
         url('goldie_rainbow-webfont.woff') format('woff'),
         url('goldie_rainbow-webfont.ttf') format('truetype'),
         url('goldie_rainbow-webfont.svg#goldie_rainbowregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
  1. Then define which HTML tags should use this custom font. The CSS code could look like this:
h1 {
font-family: goldie_rainbowregular, Arial, sans-serif;
font-size: 48px;
}

h2 {
font-family: goldie_rainbowregular, Arial, sans-serif;
font-size: 36px;
}

h3 {
font-family: goldie_rainbowregular, Arial, sans-serif;
font-size: 24px;
}

As you can see in the code above, the font "goldie_rainbowregular" is used for level 1, 2 and 3 titles. The second value (Arial) and the third value (sans-serif) are backup fonts that will be taken into account by browsers in case they fail to load your custom font.

I can see that this method is much more complex than the previous one but it is the classic and universal way to add a custom font to a WordPress theme.

7 - Custom font via Divi settings

There is one last solution for adding custom fonts to Divi. This is if your font is hosted elsewhere on the web or if you need a Google Font that is not yet available in the Divi Builder (this can happen).

Here's how to do it:

Custom Font Divi
Add a custom font via the Divi theme
  1. Visit the Google Fonts. Find your font and select it by clicking on +Select this style.
  2. A side panel opens.
  3. In the Embedtab, you will find the code to implement in Divi. Copy the first one.
  4. Retournez dans l’administration de votre site à l’onglet <strong>Divi > Options du thème > Intégration</strong> et collez ce code dans le premier champ, la section <strong><head></strong> du site. Le code devrait ressembler à cela :
 
  1. Then, you will have to define in your CSS style sheet which elements should use this new font. For example, if I want my H4 titles to use the Lobster font, here is the code to add to the Appearance > Customise > Additional CSS tab:
h4 {
font-family: 'Lobster', cursive;
font-size: 24px;
}
  1. Now, regardless of the editor used (Gutenberg or Divi), all fonts defined in the style sheet must be functional on the entire site.

8 - In conclusion...

Fonts, colours and images are the most important elements in a website design. As with all things WordPress, there are various ways to achieve this. I hope this tutorial has helped you to better understand how WordPress and Divi and will have helped you move forward with your site projects.

To go further, here is a reading list that should interest you:

Polices Perso Divi
Ajouter Polices personnalisées Divi
obtenir divi bouton
quizz divi bouton
newsletter bouton
formation divi bouton
guide divi pdf bouton
bouton support divi

You might like it too:

Comment changer une image au survol de la souris ?

How to change an image on mouseover?

If you are not using the hover options available in Divi, you are missing out! Here's an example of how to use them that you might find useful. In this tutorial and video, I show you how to change an image on mouseover.

Page d’erreur 404 personnalisée : avec et sans le Divi Thème Builder

Custom 404 error page: with and without the Divi Theme Builder

Have you thought about customising your site's 404 error page? No ? Well, you should: not only is it easy to do, but it could also lower your bounce rate! The idea is to keep the user who passes through your site on your site. Discover the step by step tutorial + video.

49 Commentaires

  1. Anne-Laure

    Bonjour ! Merci pour ce post très constructif !
    J’ai suivi à la lettre la méthode Mime Type Plus et l’ajout de police dans le divi builder !
    A priori ça fonctionne très bien sur l’ensemble de mes sites, sauf sur un !
    Je ne comprend pas, lorsque je visionne une page la police personnalisé s’affiche très bien, et si je recharge la page la police saute ! Auriez-vous un conseil ? Merci beaucoup !

  2. Lycia Diaz

    Salut Anne Laure. Ça saute puis ça revient ? Ça peut venir du cache peut-être. As-tu un plugin de cache ?

  3. Anne-Laure

    Oui c’est ça ! Merci pour ta réponse rapide !
    Ca saute et ça revient ! J’avais de prè-installé « WP Fastest Cache » et « WP-Optimize – Clean, Compress, Cache » que j’ai désactivé pour voir si ça venait de là… Mais pas de changement visible !

  4. Anne-Laure

    C’est exactement ça ! Merci de ta réponse rapide
    La police saute et revient !
    J’avais deux extensions pré-installé : WP Fastest Cache et WP-Optimize – Clean, Compress, Cache
    ! Je les ai désactivé mais rien ne change !

  5. Lycia Diaz

    Alors si rien ne change, il faut investiguer : essaye avec une autre police pour voir si ça vient de là ou alors il peut y avoir un conflit ailleurs ?

  6. Anne-Laure

    J’ai changé la police mais le problème persiste ! Juste à ce niveau d’ailleurs… Sur d’autres polices personnalisées ça ne saute pas !

  7. Lycia Diaz

    Désolée je sèche… ça vient peut-être des autres plugins…

  8. Emilie

    Bonjour Lycia,
    Sur la version wordpress 5.6.2, je ne trouve pas cette ligne de code dans le wp-config ?
    Merci pour cet article.
    Emilie

  9. granon

    Bonjour Lycia,
    Je viens de finir une refonte de site dans un sous-domaine et j’avais installé une police personnalisée dans Divi : le Faune (http://www.cnap.graphismeenfrance.fr/faune/). Tout fonctionnait bien mais lorsque j’ai déposé les fichiers à la racine du domaine, les polices ont sauté et je n’arrive pas à les rétablir. J’ai vérifié via le FTP : elles sont bien présentes dans le dossier fontes (.ttf et .otf). As-tu une idée ?
    Merci d’avance pour tes lumières.
    Sandrine
    PS. Le site en question est ‘atelierdelta.eu’. Sur la page d’accueil, on peut voir un exemple d’italique dans le bloc du haut. Les fonds aussi ont disparus mais je les ai rétablis sur la page d’accueil et sur le page espace Public…

  10. Emilie

    Désolée, j’avais mal lu, il faut lui ajouter cette ligne de code,
    vous pouvez supprimer mon commentaire si vous voulez.
    Merci encore pour votre site.

  11. Lycia Diaz

    OK Super !

  12. Lycia Diaz

    Salut Granon, c’est bizarre. Il y avait peut-être un problème de mise en cache ? C’est rentré dans l’ordre depuis ?

  13. Granon Sandrine

    J’ai installé les polices à nouveau et tout est rentré dans l’ordre. Merci.

  14. Lycia Diaz

    Super !

  15. Elisa Morgand

    Merci pour le tutoriel ! Il fonctionne à merveille !

  16. Lycia Diaz

    Super !

  17. François LIEURY

    Bonjour,
    Je voulais essayé de suivre votre tuto pour personnaliser ma typographie : mais dans le 5.3 – Définir une police personnalisée par défaut moi je tombe sur un side-barre « vide » j’ai juste un onglet widget qui est vide…
    Est-ce que j’ai fait une erreur qui empêche les paramètres généraux de s’afficher?
    En vous remerciant pour ce que vous faites et du temps que vous allez m’accorder,
    Cordialement
    François

  18. Hank

    Great article, super helpful!

  19. Lycia Diaz

    Thank you Hank !

  20. Lycia Diaz

    Bonjour François, il faut bien aller à l’onglet Apparence > Personnaliser > Paramètres généraux > Typographie. Il n’y a pas de Widget ici.

  21. Emilie

    Bonjour,

    Ma police n’apparait pas sur le mobile mais je la bien sur les autres écrans.
    Savez-vous d’où ça pourrait venir ?
    J’ai mis la police avec la méthode font-face

    Merci d’avance

  22. Lycia Diaz

    Bonjour Emilie, c’est bizarre. Peut-être as-tu un plugin de cache qui empêche cela ?

  23. Emilie

    Bonjour Lycia,

    Merci pour votre réponse.
    En effet cela venait du plugin 🙂

  24. Isabelle

    Bonjour. Merci encore une fois pour ce super article. Vous êtes devenue ma référence. Bravo pour votre boulot.
    J’ai une question. J’ai déjà installé une police en otf. Vous recommandez d’installer au moins deux formats. Comment rajouter le format ttf si possible sans avoir à rentrer dans le code? Sinon il me faudrait desinstaller ma police et la réinstaller avec les deux formats. Est-ce vraiment nécessaire si la version otf semble bien fonctionner sur différents navigateurs?

    Merci pour votre réponse.

  25. isabelle

    Bonjour,

    Je ne sais pas si mon précédent commentaire a bien été enregistré.
    J’ai déjà téléchargé ma police en otf et elle s’affiche bien sur les navigateurs mentionnées dans le tableau plus haut. Est-il malgré tout indispensable que je charge la version ttf sur le site? Si oui, comment faire pour la rajouter sans avoir à supprimer celle déjà installé? Ai-je une solution qui m’éviterait de rentrer dans le code du site svp? J’avoue que tout fonctionne et que j’aimerais éviter des manipulations que je ne maitriserai pas mais votre article m’interpelle.

    Merci pour votre réponse.

  26. Lycia Diaz

    Pardon Isabelle, je t’ai répondu par email. Non, c’est bon, le fichier OTF est suffisant normalement. Si tout fonctionne, pas besoin du TTF

  27. Lycia Diaz

    Non, si tout fonctionne, pas besoin du second fichier.

  28. Anthony F

    Thank you so much for your help! Before reading your guide, I couldn’t even upload files downloaded directly from Google Fonts – I was going to rip my hair out!!!

    I followed ‘5.4.2 – Solution #2: correct with an extension’ – the Mime Types Plus plugin is so easy to use.

    Thank you so much again!

  29. Emma

    Un tout grand merci pour ton article. J’avais justement le problème avec le message d’erreur et grâce à toi, j’ai eu l’occasion de télécharger le plugin nécessaire pour lever se problème.
    Merci 🙂

  30. Lycia Diaz

    Super

  31. Mathilde

    Bonjour Lycia,

    J’espère que tu vas bien.

    Doit-on obligatoirement désactiver Google Font pour télécharger de nouvelles polices ? Car lorsque je tente d’en télécharger, je reçois ce message d’erreur : « Désolé, ce type de fichier n’est pas autorisé pour des raisons de sécurité. »

    Merci pour ton aide !

  32. Lycia Diaz

    Salut Mathilde, non il ne faut pas les désactiver. Mais à voir ton commentaire je comprends que tu n’as pas lu mon tutoriel en entier 😉

  33. Lycia Diaz

    Great ! Thank you 😉

  34. ValMer

    Bonjour Lycia,
    j’ai une question à laquelle je n’arrive pas à trouver la solution :

    Je dois utiliser une font d’Adobe (j’ai le compte CC), sur un site DIVI, mais je ne sais pas commet faire…
    As-tu une idée ?

    Merci d’avance,
    Valérie

  35. Aurore V

    Bonjour Lycia 🙂
    Merci beaucoup pour ces explications très détaillées ! J’ai essayé d’intégrer les polices avec la méthode Font face sur le FTP et en plus de mettre H1, H2 etc.. j’ai aussi ajouté « a, li, nav… » car je souhaitais que la police soit aussi mon corps de texte. Or finalement c’est toute l’interface de Divi qui devient cette typographie. Lorsque je suis dans le visual builder et que je clique sur l’engrenage pour modifier quelque chose toute la fenêtre Divi qui s’affiche est écrite dans cette même typographie. Y a t-il un moyen de faire en sorte que la police qu’on importe s’affiche pour tous les titres, corps de textes, listes à puce etc.. sauf pour l’interface Divi ?
    Merci beaucoup !

  36. Lycia Diaz

    Hello Aurore, non, en effet, tout prend la police que tu as codé. Si elle te dérange, pense à tes lecteurs, elle pourrait les déranger aussi ? Sinon, si tu penses que c’est acceptable, il faudra faire avec, aussi dans le back office 😉

  37. Lycia Diaz

    Salut Valerie, je sais pas ? Est il possible d’obtenir les fichiers de cette police ? Si oui, tu suis simplement le tutoriel ici

  38. ValMer

    Merci de ton retour Lycia,
    j’ai eu la réponse de la part d’Adobe, et oui il faut une licence supplémentaire pour utiliser leur fonts en version web (alors que j’ai la licence…). Belle fin d’année à tous !

  39. Lycia Diaz

    Ah ok merci pour l’info, c’est pas étonnant de leur part…

  40. Aline

    Merciiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii !
    Décidément, c’est régulièrement grâce à ton blog que je trouve réponse à mes blocages ! trop chouette !

  41. Lycia Diaz

    Super !

  42. Marine

    Oh génial, merci Lycia, j’avais le message d’erreur suite à l’importation des 2 formats, et grâce à Mime Types Plus le problème est résolu !! 🙂

  43. Lycia Diaz

    Super Marine !

  44. Melinda

    Merci beaucoup !!

  45. Amélie

    Merci infiniment pour ce tuto !
    D’habitude mes imports de police se passent sans encombre mais aujourd’hui ça ne fonctionnait pas. Jusqu’à ce que j’utilise la méthode Mime Types Plus que je ne connaissais pas.
    Merci encore 😀

  46. Lycia Diaz

    Super !

  47. Louis Bertin

    Bonjour Lycia,

    Merci pour cet article qui me sauve la vie ahah !

    Petite question : J’ai utilisé la méthode avec Mime Type Plus. Une fois que j’ai réalisé l’opération et que tout fonctionne, est-ce que je peux désinstaller l’extension ?

    Merci encore,

  48. softbigs

    I love Divi custom fonts! They make my blog look so professional.

  49. Lycia Diaz

    Louis, oui, normalement, tu peux supprimer l’extension.

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.