Divi custom fonts: how does it work?

Published on 09/09/2020 | 14 comments

A custom Divi font is a font that is not natively available within the Divi editor or even WordPress (Gutenberg). However, depending on your project or your client's project, it is likely that you will need to use specific fonts that have been custom designed for the project or purchased on a dedicated platform. This is a far cry from the eternal Google Fonts found 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.

Advertisement: This article contains affiliate links that you will easily recognize. 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, or at least should look, the same... That's why using a custom font - also known as a Custom Font - is a good starting point to differentiate your site from "common" sites.

A custom font allows you to perfectly match your graphic charter. For example, the font used for your logo could be used on your website. Thus, 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 more or less well supported by browsers (Chrome, Firefox, Opera, Safari...).

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

Browser versionsEOTOTF/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 will import in 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 then be to import all font formats into your site so that all your users can benefit from them.

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

The other solution, which is more of a backup, is to indicate 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 any longer! Discover the Divi theme here !

3 - Custom font vs Google Font

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

It is true that the choice is quite vast and it is rare not to find the right shoe for you with the multitude of fonts available. However, most of them are seen and reviewed. That's true... But there's also another point to address: confidentiality.

Indeed, by using this service, the Google Fonts API provides the fonts requested when visiting a web page from Google's servers. This is stored in the cache of your visitor's browser and is updated if necessary. As a result, Google retrieves your visitor's IP address, which is nothing more than personal data. In this case, the RGDP 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 will need to inform your visitor about it, as required by the DPMR. You will also need to link to the Google Privacy Policy. To learn more about this, I advise you to read this detailed article.

It is also for these reasons that Divi offers Google Fonts disabling for your project:

Desactiver Google Fonts Divi
Disable Google Fonts in Divi

To disable Divi's Google Fonts, 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 don't forget to respect copyrights. Indeed, free fonts are not necessarily royalty free, that's the first thing to remember.

Next, it is important to know that there are premium policies, i.e. paid policies. In this case, please refer to the license of these fonts because some of them can be used in your commercial projects and others only in your personal projects. So be sure to find out.

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 title fonts. Sites such as Typespiration or FontJoy allow the right balance to be struck between the two.

plus de ressources pour Divi

5 - Custom font via Divi Builder

It's the easiest option! Once you've found your ideal font(s) and have their files, here are the steps to install them into Divi :

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

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

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

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

There, you are now in possession of the OTF and TTF files.

5.2 - Importing custom fonts via Divi Builder

The rest of the process is simple:

Insérer des Polices Personnalisées Divi
Importing fonts into 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. From the drop-down menu, choose "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 OTF and TTF files.
  5. Validate by clicking on upload.

Now, your personalized policy should be functional...

5.3 - Setting a default custom font

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

This way, you don't have to set 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 tab > Customize > General Settings > Typography and select your new font. You can set your font for all your site titles (header font) as well as your font for the body of the site.

5.4 - Problem when importing your policy in Divi

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

Sometimes you may not be able to import your custom font into the Divi Builder, which says :

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

There are two solutions to correct the problem:

5.4.1 - Solution n°1 : fix via wp-config.php

If you are comfortable with WordPress, your server and your FTP software, all you need 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 wp-config.php to allow custom font imports into Divi

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

5.4.2 - Solution n°2 : correct using an extension

If you are not at all comfortable with file handling within your server, then prefer to use a dedicated :

Autoriser Ttf Otf WordPress
Allowing 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 > Edit Mime Type tab.
  3. To allow OTF files: note otf in the extension field, font/otf in the Mime Type field and choose Document as a file type.
  4. To authorize files TTF jot down ttf in the extension field, font/ttf in the Mime Type field and choose Document as a file type.

That's it, you can restart the import (step 5.2 of this article) and you should no longer encounter the problem.

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

Another solution exists to implement a new font in your WordPress site, it is the @font-face method. This works for any theme, not just Divi.

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

Font Squirrel Converter
Converting fonts with FontSquirrel
  1. See you on the FontSquirrel's official website and download the custom font file you have in your possession (OTF or TTF for example).
  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 the DOWNLOAD YOUR KIT.
  5. You are now in possession of 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 stylesheet.css file of your child theme and place the code contained in the stylesheet.css file provided by FontSquirrel. This code looks like this one :
@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 "goldie_rainbowregular" font 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 are unable to load your custom font.

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

7 - Custom font via Divi settings

There is one last solution to add custom fonts in Divi. This applies 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
Adding a custom font via the Divi theme
  1. Go to the Google Fonts. Search for your font and select it by clicking on +Select this style.
  2. A side panel opens.
  3. In the tab Embedyou will find the code to implement in Divi. Copy the first one.
  4. Go back to your site administration and go to the Divi tab > Theme Options > Integration and paste this code into the first field, the section of the site. The code should look like this:
 
  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 tab > Customize > Additional CSS :
h4 {
font-family: 'Lobster', cursive;
font-size: 24px;
}
  1. Now, regardless of the editor used (Gutenberg or Divi), all fonts defined in the stylesheet must be functional on the entire site.

8 - In conclusion...

Fonts, colours and images are the most important elements in a graphic charter and in a website design. As always with WordPress, there are a variety of ways to achieve this. I hope that this tutorial has helped you to better understand how to use 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
Add custom font in Divi

2,320 words

9

You should like it too:

Appliquer des masques et des formes sur vos images avec Divi

Apply masks and shapes to your images with Divi

Masks make your images more graphic and give originality to your layout. Did you know that you can easily create them using the Divi Visual Builder? I show you how in this tutorial and in this video.

Effet zoom sur image avec texte cliquable

Zoom effect on image with clickable text

This article explains how to get a simple zoom effect when hovering over images with text and a clickable link. No need for an extension, Divi makes it easy!

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

Soumettre un commentaire

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

Je souhaite recevoir les news du blog Astuces Divi !

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

Pin It on Pinterest

Shares
Share This