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.cssand 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.)
Hi Johnny, How to action step 3? I know nothing about it. Please elaborate
Sorry! I hadn’t noticed the video tutorial. My bad! Awesome tutorial. Thanks!
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.
When you say “it doesn’t seem to work”…what is that referring to?
If I disable Google fonts from Divi Theme Options. The fonts on my page change to Sans Serif.
Sounds like you didn’t local load correctly. You should check console errors. But sounds like you need a developer to handle for you.
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.
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?
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.