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
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.)