How to Optimize Google Font Delivery for the WordPress Divi Theme

I am a fan of using the Divi Theme by Elegant themes. However one thing that I have had issue with was how the google fonts were delivered to the site. I wanted a faster delivery for a faster sight.

Specifically,

Always Open Sans

It always seemed that even when I was not using Open Sans, that Divi still loaded it with many styles

http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&subset=latin,latin-ext

Wow, that is a lot to load when I am not using it.

Too many font weights, styles and languages

And for the fonts that I was loading, I did not need all of the variations that were being loaded by Divi. For example on one site I was using the font Arimo Bold in one place on the site, that is it. However Divi was loading this: http://fonts.googleapis.com/css?family=Arimo:400,400italic,700italic,700&subset=latin,cyrillic-ext,latin-ext,greek-ext,cyrillic,greek,vietnamese.

Cyrillic, Greek, Vietnamese?

Too many files to download

So if I choose to use two google fonts for the site I am working on, (google not to load to many for speed of site), then I am going to end up loading at least 2 fonts from google which have to be downloaded and processed before the rest of my site is finished loading. If I can combine this into one file that makes it better. In reality when you add the extra Open Sans font as described above, and also the additional Open Sans call for the Elegant Themes Monarch plugin which I also use (at least that only calls for 2 font weights http://fonts.googleapis.com/css?family=Open+Sans:400,700), then I have my two fonts and Open Sans being called twice = 4 google font files to download.

Want to see it for yourself?

1. You can go to Google Page Speed Insights and enter your website for results.
2. Then look under what is likely the top topic, “Eliminate render-blocking JavaScript and CSS in above-the-fold content”
3. and click the blue link, “Show how to fix”.
4. Then look for “Optimize CSS Delivery of the following:” and hover over the results.

You can also do this once you have made your changes to see, and check the results of your work.

THE SOLUTION

My solution was to disable the loading of Google fonts by Divi and Monarch and create my own Google font file that included only the fonts I wanted with only the weights, styles and languages I wanted and add that font file link to Divi Theme Options > Integration > Add code to the < head > of your blog.

Thanks to Elegant Themes support, they hooked me up with the code to remove those fonts, which I am providing below for you to use.

Where to add the code

This code needs to be added to your the functions.php file inside your theme. So if you have a child theme, then you would add this to your child theme’s function.php file. If you do not have one, then you would need to create one; or you can use this functions.php file and edit as you like. That is a zip file; download it, expand it and add it to your theme files via FTP or your hosting control panel.

Also in that file I included code to disable the Divi TinyMCE buttons. If you do not want to remove those buttons, then remove the code under “HIDE DIVI TINYMCE BUTTONS” except for the ?>. Do not remove the last part.

DISCLAIMER. And messing with your functions.php file can take your site down if you make an error, so don’t mess around with it if you don’t feel comfortable with it. However in the case of what I am talking about, if you just save your functions.php file before you make any changes and revert back if you create a problem, then you are fine.

CORRECTIONS. Something seems to have changed and I have not had the time to check it myself. Use this as a guideline but also read the comments as there is some discussion to improve and fix what was started here.

Included in the corrections I have updated as of October 22, 2017 the code below for removing all divi google fonts based on a change in the Divi code as shared on this post in the Divi forums.

The code

If you have a functions.php file, add this code to it, or the parts that you want based on your need. I broke it up into 3 parts.

// REMOVE OPEN SANS GOOGLE FONT FROM DIVI
function disable_open_sans_divi() {
wp_dequeue_style( 'divi-fonts' );
}
add_action( 'wp_enqueue_scripts', 'disable_open_sans_divi', 20 );

// REMOVE OPEN SANS GOOGLE FONT FROM MONARCH
function disable_open_sans_monarch() {
wp_dequeue_style( 'et-gf-open-sans' );
}
add_action( 'wp_enqueue_scripts', 'disable_open_sans_monarch', 20 );

// REMOVE ALL DIVI GOOGLE FONTS (Except Open Sans) FROM DIVI
function et_builder_get_google_fonts() {return array();}
function et_get_google_fonts() {return array();}

Use the parts you want.

Was this helpful?

Please share below if you found this helpful, or not.