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.

10 Responses to How to Optimize Google Font Delivery for the WordPress Divi Theme

  1. Paolo Euvrard August 28, 2017 at 2:01 am #

    works like a charm for me.
    Thanks for the tip!

  2. mitali khan August 9, 2017 at 9:12 am #

    I try that into my website site but still, i am facing the same problem is there any one who can help me with same.

    • David Tierney August 9, 2017 at 7:28 pm #

      Hi Mitali,

      I have been swamped and not had a chance to look into this, but perhaps someone else in this thread has had success. Also you can try the Elegant Themes forum and reference the thread I did for starters. And then report back here if you don’t mind. Thanks,

  3. Gary July 21, 2017 at 9:09 pm #

    l got a note from GTMetrix.com to optimize a section of my Divi theme wordpress site –

    The following resources have identical contents, but are served from different URLs. Serve these resources from a consistent URL to save 1 request(s) and 23.5KiB.

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

    I was able to find one reference in functions.php, but not two. Nothing in header.php and nothing in the integration code.

    Any idea of what I can do here to fix this similar problem?
    Thanks – Gary

    • David Tierney July 23, 2017 at 11:19 am #

      Is this after adding some of the code in this post? Perhaps you did not successfully disable the Open Sans from Monarch or Divi but you also added code either y our self or there is another plugin that is adding Open Sans also.

  4. Chris July 18, 2017 at 3:26 am #

    I also had the array_merge errors appear on my site.

    Simply change as follows:
    function et_builder_get_google_fonts() {}
    function et_get_google_fonts() {}

    To:
    function et_builder_get_google_fonts() { return array(); }
    function et_get_google_fonts() { return array(); }

    • David Tierney July 18, 2017 at 12:05 pm #

      Thanks for contributing Chris. I had not had a chance to look into that further but had issues using this on another site and could not figure why it worked on the first and not the second.

      • Chris July 18, 2017 at 2:14 pm #

        No worries. Since the errors are from the builder scripts maybe the errors only show up when logged in? Would explain why some sites don’t display the errors. Haven’t tested that though.

  5. Steffen July 3, 2017 at 8:55 am #

    Hi David,

    thanks a lot for this post – I was looking for a way to reduce http requests to speed up my site and I also looked into removing Google fonts from Divi.

    I found that if I want to remove ALL fonts, as per your third snippet, I get warning messages like these:

    Warning: array_merge(): Argument #2 is not an array in /home/sruefer_tradingxplained/tradingxplained.com/wp-content/themes/Divi/includes/builder/core.php on line 2958

    Warning: array_key_exists() expects parameter 2 to be array, null given in /home/sruefer_tradingxplained/tradingxplained.com/wp-content/themes/Divi/includes/builder/functions.php on line 1392

    So unfortunately that does not work. Removing fonts from Monarch works, and removing Open Sans works also.

    Cheers,
    Steffen

    • David Tierney July 3, 2017 at 10:06 am #

      Hi Steffen,

      That is curious because I have those lines working in one of my client sites. I checked the blog post and that is what I used.

      You can reference the support thread at Elegant themes here: https://www.elegantthemes.com/forum/viewtopic.php?f=187&t=700174&p=3853696#p3853696. My suggest would be to create a new support thread with them and reference that one with a follow up question. My request would be to share what you learn back here.

      Good luck and thanks for the feedback.

Leave a Comment. Join the Conversation!
Did that help? Do you have questions?

Need Help with Your Website?

Why not get it done FASTER and EASIER with help from a friendly, helpful Professional?

Call (707) 965-9727

Or use our Contact Form

I am located in Northern California, U.S.A.

Great!

Pin It on Pinterest

Share This

Share This

Share this post with your friends!