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.
I hate to break it out to you but there’s much explaining to do. After disabling Google fonts in divi theme options when I come back to the theme ‘customizer – general settings – typography’ , i see here that it all changes to ‘Default theme fonts’ in comparison to the fonts I had selected before. Now on my page I can see the font loading is verdant and says sheriff which seem to he the default theme fonts but then where I have selected the actual font on the in the builder settings I see the fonts show as of my earlier choice like robots, etc. These show for eg. Roboto and nunito where I had selected it in the builder only whereas where it’s selected default it shows default theme fonts i.e verdana and sans seriff. So do I have reenable Google fonts to change the font set inside the builder to the actual font instead of default theme font and then disable Google fonts again so that atleast the modules knows which fonts to call even if the Google fonts is disabled ?
Despite the fact that I have disabled Google fonts inside divi theme options it seems that wherever I have set fonts like roboto etc. these actually remains the front end fonts wherever selected inside builder modules but then they are not actually the real roboto and just shows roboto cause the font call is displaying robot and thus many Google extensions and inspect tool show it as roboto but in reality it’s not roboto. So I guess we can host the roboto locally for the real roboto to show up, correct? So far hopefully we are on the same page I hope. Another issue is that in theme customizer only default theme fonts show after disabling Google fonts and the ones I host to the theme fonts directory are not showing in in drop-down so cause of this I’m unable to change the font which can 9nly be changed via css as it has no to her way to edit it from any editor. This brings me to another question that when we change the font family text via css important statement then does the browser load 2 font sor does it load the important one and disables the other- this is in the case we use css to overwrite font output?
Can someone please help me just to understand how to simply disable Google fonts , and self host the ones which you only need to theme fonts and be able to select these hosted fonts from the divi customizer font options also..
Also would CSS important statement like for eg
font-family: roboto!important;
Would this end up loading both fonts or only the ones overwritten with important?
I think you need to hire a dev. Your comment is too long for me to read quickly and I don’t think your technical level is good enough for me to explain briefly.
Hi Johnny,
Firstly im sorry for the typos as its typed too quickly and with no option to edit the reply. So i can assure you technical level is apt for such work but i only need a push in that direction by the great wp johnny. I’m pretty sure i can handle what you say as i know css and html and everything related to front end. Give it a shot.
Theres not much to answer, my only question is about how to disable google font on divi and then host fonts locally on my server and also enable only my self hosted fonts to the customizer drop down (customizer-general settings- typography).
The issue is that if i disable google fonts inside divi theme options then default divi theme fonts still exist. we need to change them aswell as they are being called for by the builder module settings. Even if we call out a different font then there will always be default theme fonts working for some parts of a page to which the builder or module settings dont have access to manually and this can be changed via CSS overwrite like for eg. font-family: roboto!important;
above you can clearly see the css important property will overwrite the font output . But some experts advise against using css to overwirte font family output as often what happens is despite of the important property it will still load 2 fonts i.e 1 for important property and plus the one otherwise. If this is true then this makes a mess of css snippets. Alternatively why cant we just upload the fonts to the themes font directory and possibly use it from the divi theme customizer- general settings- typography. This is cause even after i host it on my server the fonts are still disabled from within this dropdown and only default theme fonts is selected after disabling google fonts from divi theme options.
Now this is simple to answer if you use the Divi theme . Try me . I am a huge Fan buddy. Let me know you expert advise my friend. Cant wait to hear from the great WP johnny.
TIA
Cheers
Nah man, I’m too lazy to answer this. Please write your post in the FB group and see if the community can help you out piece by piece. I’ll chime in when the task objective seems easy enough for me to digest in 2 minutes.
Haha let’s talk about your favorite holiday destinations then ?