This time I’ll show you how to add Google fonts locally to your Divi theme. As we saw for GeneratePress similar post this is a great way to avoid any kind of GDPR issues if you need or want to deal with EU Privacy Regulation and to have a better website performance.

Before starting with this tutorial I strongly suggest to create a Divi child theme. It’s easy and not time consuming.

The real first thing you need to do for adding Google fonts locally in Divi is to create an “/assets” folder in your child theme, where you can store your fonts and download them for a great web app called Google Webfonts Helper.

You can follow those easy step in my previous post about loading Google fonts locally in GeneratePress. Go there, read the first 2 steps and come back here to see how to include your fonts in Divi.

Load your local fonts in your main stylesheet

Once you have your Google fonts inside your Divi child theme, it’s time to load them with CSS.

Inside Google Webfonts Helper there is a section called “Copy CSS” with an helper input called “Customize folder prefix“.

Delete everything inside that input and just write: “assets/fonts/“. It magically writes out for you all the CSS that you need to load your fonts in your theme.

You’ll have something like this:

/* inter-100 - latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100;
  src: url('assets/fonts/inter-v12-latin-100.woff2') format('woff2'),
       url('assets/fonts/inter-v12-latin-100.woff') format('woff');
}

/* inter-200 - latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 200;
  src: url('assets/fonts/inter-v12-latin-200.woff2') format('woff2'),
       url('assets/fonts/inter-v12-latin-200.woff') format('woff');
}

Add your fonts in Divi Customizer or inside your modules

To make it possible to choose your new local Google fonts from the Divi Customizer or inside any Divi modules, where you can manage your typography styles, you need to filter a Divi theme core function called “et_websafe_fonts“.

Open your “functions.php” file and add this custom function to filter “et_websafe_fonts“:

/**
 * Load Custom Fonts in Divi
 */
function mb_load_divi_custom_font( $fonts ) {
  
  // Add font to Divi's font menu
  $custom_font = array(
    'Inter' => array (
    'styles'        => '100,200,300,400,500,600,700,800,900',
    'character_set' => 'latin',
    'type'          => 'sans-serif',
    'standard'      => 1
    )
  );

  return array_merge( $custom_font, $fonts );
}

add_filter( 'et_websafe_fonts', 'mb_load_divi_custom_font', 10, 2 );

In the example above, after loading it with CSS, I’ve added “Inter” font family to my $custom_font array, then I’ve merged it with the default Divi $font array.

Divi comes with 5 different local fonts: Georgia, Times New Roman, Arial, Trebuchet and Verdana and what I did was to extend this list of fonts.

If you want it is possible to check the “et_core_get_websafe_fonts” inside “Divi/core/functions.php” and see how it works behind the scene.

How to add more than a single font family

When your project needs more than one font family, you can simply add them with that same filter with used before.

/**
 * Load Custom Fonts in Divi
 */
function mb_load_divi_custom_font( $fonts ) {
  
  // Add font to Divi's font menu
  $custom_font = array(
    'Inter' => array (
    'styles'        => '100,200,300,400,500,600,700,800,900',
    'character_set' => 'latin',
    'type'          => 'sans-serif',
    'standard'      => 1
    ),
    'Montserrat' => array (
    'styles'        => '400,700,900',
    'character_set' => 'latin',
    'type'          => 'sans-serif',
    'standard'      => 1
    )
  );

  return array_merge( $custom_font, $fonts );
}

add_filter( 'et_websafe_fonts', 'mb_load_divi_custom_font', 10, 2 );

Code is the same, you just need to add another font, in the example above “Montserrat”, in the $custom_font associative array.

Disable Google fonts in Divi

Now, to be fully compliant with EU GDPR regulation and have a great website performance, it is good to avoid Divi loading fonts from Google API.

Go to “Divi Theme Options” and from the “General” panel disable “Use Google Fonts“.

Now your Divi child theme won’t load anymore fonts from Google.

Check if your local fonts are loaded in Divi Customizer or modules

Open your Divi Theme Customizer and from “General Settings>Typography” see if you local fonts are included in “Header Font” or “Body Font” dropdown menu.

If you did everything right, you can surely see all the fonts you’ve added to Divi.

As you have seen loading Google fonts locally also to Divi Theme is not that hard at all.

I really hope this tutorial will help you and save you some time.

Code Long and Prosper!