• Skip to primary navigation
  • Skip to main content
  • Skip to footer

WPJohnny

WordPress Performance Guides and Reviews

  • Start a WordPress site
  • Hosting
  • Themes
  • Plugins
  • Blogging
  • Marketing

Local-load Google webfonts in DIVI (in just 5 minutes)

WordPress plugins Jan 17, 2021 by Johnny 9 Comments

Load Google font calls faster and with better page scores in DIVI pagebuilder.

Pagebuilders often load too many webfonts (even styles/sizes you don’t use) and make slow 3rd-party request that slow down your page loads and impact your page scores. So I show you how to manually load from your server only the Google fonts you need, and disable Google webfont load from DIVI.

Super quick tutorial. But easy enough for anyone to do.

Step #1 – make a list of all Google webfonts used on your site.

  • Check different pages (ones with different page templates).
  • Inspect different using your browser developer tools. Or use this handy FOUNT tool.

Remember…keep track of every font, font size, and whether or not you use italics in that size.

Step #2 – upload the fonts to your child theme directory.

  • Download the fonts from Google Webfont Helper.
  • You only need the modern formats, WOFF & WOFF2. They cover over 98% of users already.
  • Upload the fonts to a “fonts” directory inside your child theme directory.
  • Put that path into the custom prefix box so it outputs the styles with the right url already. (Your font call urls should be ../child-theme-name/fonts/*font-file*.)

Step #3 – copy the font calls to your child theme stylesheet.

  • The stylesheet is usually called style.css and located right in your child theme directory.
  • Paste in the styles right into there. (It doesn’t matter where you place them, but I prefer at the top.)

Step #4 – disable the Google font call from DIVI.

  • Go to Dashboard > Divi > Theme Options.
  • Scroll down to “Use Google Fonts” (it’s like the 11th option) and click DISABLE. Then scroll to bottom and hit [SAVE CHANGES].

That’s it, you are done! Go look cool to your clients now. Or be a shady developer and tell them it took you 5 hours instead of 5 minutes. (Special thanks to Paka Shaka for letting me show his site on this Youtube tutorial.)

Share this post:

FacebookTwitterLinkedInWhatsAppEmailSMS

Read all my posts on WordPress plugins

About Johnny

Right on the edge of WordPress development! 10+ years of WordPress design, development, hosting, speed optimization, product advisor, marketing, monetization. I do all that.

More WordPress Guides

The Most Difficult WordPress Speed Optimization Clients

Cache warming with Optimus Cache Prime (OCP)

Responding to potential clients saying “your price is too high”

Avoid Dropdown/Hamburger Menus (Bad Web Design UI)

The EASIEST WAY to Find Clients as a Freelancer

The WordPress Open-Source Conundrum

Reader Interactions

9 Comments

  1. Dhruv

    January 18, 2021 at 10:29 pm

    Hi Johnny, How to action step 3? I know nothing about it. Please elaborate

    Reply
    • Dhruv

      January 18, 2021 at 10:38 pm

      Sorry! I hadn’t noticed the video tutorial. My bad! Awesome tutorial. Thanks!

      Reply
  2. Dhruv

    February 6, 2021 at 11:10 am

    Hi Johnny, I have tried your tutorial to the T but still the moment I disable “Enable Google Fonts” in Divi Theme Options, it doesn’t seem to work. Could you please look at my site https://dhruvrathod.com and suggest what to do.

    Reply
    • Johnny

      February 6, 2021 at 1:46 pm

      When you say “it doesn’t seem to work”…what is that referring to?

      Reply
      • Dhruv

        February 8, 2021 at 2:36 am

        If I disable Google fonts from Divi Theme Options. The fonts on my page change to Sans Serif.

        Reply
        • Johnny

          February 8, 2021 at 7:57 am

          Sounds like you didn’t local load correctly. You should check console errors. But sounds like you need a developer to handle for you.

          Reply
  3. Alan

    February 16, 2021 at 2:47 pm

    Thanks for the tutorial, super helpful.

    I’ve followed the process and noticed that after disabling google fonts I can’t see the local fonts in the theme customiser options.

    General settings > typography > header & body fonts dropdown don’t show them as a selectable option.

    Reply
    • Johnny

      February 17, 2021 at 7:36 am

      I’m not 100% sure what your problem is, Alan. That the fonts you want to load don’t show at all in the customizer?

      Reply
      • Alan

        February 17, 2021 at 7:43 am

        Sorry, yes that’s exactly it. I can see the fonts are now locally loaded on the test site using the page inspector. When I use the Divi builder the fonts aren’t shown in the dropdown selection.

        Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Footer

More links

  • Gadget reviews
  • Try my free WPJ plugins
  • Join the WPJ FB Group
  • Watch my YouTube videos
  • Subscribe to my newsletter

Popular Reviews

  • Best WordPress Hosting
  • Best WordPress Themes
  • Best WordPress Plugins
  • Best WordPress Cache Plugins

Services

  • Speed optimization
  • Speed optimization courses
  • WordPress hosting
  • Hire me or other experts
  • Client login

About Johnny

10+ years of WordPress design, development, hosting, speed optimization, marketing.
Contact me.

newsletter block

Copyright 2021 | WordPress guides by Johnny Nguyen

Click to Copy