Divi is a big and widely used theme frantically evolving. It is sometimes not that clear why stuff happens and how to prevent it. I have spent hours recently to convince Divi to not load Google Fonts from the Google CDN but from my client’s Server instead. I here document the process in hope to preserve your time, dear reader.
I would not recommend anything to you I’ve not been using enthusiastically myself. Bold links are affiliate links. I recommend what you’ll find there and If you make a purchase, I will get a commission without additional costs to you.
Adding Fonts to the Child Theme
Of course you are using Child Themes, the Pro that you are, right?! You need to store every font you are using on the site with the Child Theme to prevent Divi from loading them from https://fonts.googleapis.com/. The best Tool I’ve found to download Google Fonts in every file format you need can be found here. That Google Web Fonts Helper is very comfortable to use and explains the process well how to add the downloaded fonts to your site. You just have to put them into a fonts-folder in your Child Theme and load them via style.css. Easypeasy! And now on to the hard part:
Preventing Request to Google Servers
You obviously do not want specify any fancy fonts to be loaded in theme settings. So we need to set the following settings to Default Theme Font in the Divi Theme Customizer
- General Settings > Typography > Header Font
- General Settings > Typography > Body Font
- Header & Navigation > Primary Menu Bar > Font
- Header & Navigation > Secondary Menu Bar > Font
- Buttons > Buttons Style > Buttons Font
This should reduce the necessary fonts to Open Sans, the Divi Default Font. Check with Chrome Developer Tools > Network if this is the only font loaded from fonts.googleapis.com and fonts.gstatic.com, the critical requests.
We now want to make our Theme not load Google Fonts at all, not even Open Sans, and to not display Google Fonts as options when editing.
The first function dequeues the font-loading queued by Divi and in the second part we overreide Divi’s functions for Google Fonts selection to return empty Arrays.
The Stubborn Few
While everything above should prevent loading Fonts from Google in most cases, we will encounter sites running on Divi still loading from Google for whatever unidentifiable reason. In that case we need to roll out the heavy artillery: Autoptimize and LiteSpeed Cache can filter those requests. Or we could always install a plugin built specifically for GDPR/DSGVO compliance. If we can’t find any requests to fonts.googleapis.com or fonts.gstatic.com in your Developer Tools Network Panel, we have fulfilled this quest.
