How to Disable Google Fonts in WordPress

Updated on

Google Fonts can be a great addition to your website that considerably improves your typography. However, they do add an external dependancy to your website and can increase page load times.

In many cases, WordPress themes and plugins may have built-in code that automatically loads Google Fonts, even if you don’t want or need them.

In this article we are going to look at how to completely remove Google Fonts from your websites.

Check Your Website

First, you will want to confirm that your website is loading fonts from Google, you can do that by entering your site into tools.pingdom.com and checking the ‘File Requests’ section:

As you can see, there are 5 requests to Google-owned domains.

fonts.googleapis.com points to the CSS styles.
fonts.gstatic.com points to the font files.

Once you have implemented the steps in this article, you can run the test again to check that there are no requests.

Using a Plugin

If you are looking to simply remove all traces of Google Fonts from your website, then there is a plugin to do that:

Simply activate the plugin and it will remove all requests to Google Fonts. There are no configurations or settings pages.

The text on your website will still display even if Google Fonts aren’t present. Browsers are smart enough to fallback to system fonts.

Disabling Google Fonts in the JupiterX Theme

The JupiterX Theme by artbees uses a unique method of adding Google Fonts, so the above methods won’t work to disable the fonts. Instead you will need to do the following:

  • Navigate to your wp-admin area
  • Hover the ‘Jupiter X’ tab
  • Click the ‘Settings’ link
  • Change the ‘Google & Adobe Fonts’ dropdown to ‘Disable’
  • Click ‘Save Settings’

Disabling Google Fonts in the Divi Theme

The Divi theme has a few different ways it can load Google Fonts, but fortunately they can all be disabled easily.

  • Navigate to your wp-admin area
  • Hover the ‘Divi’ tab
  • Click the ‘Theme Options’ link
  • Change the ‘Use Google Fonts’ toggle to ‘Off’
  • Click ‘Save Settings’

Disabling Google Fonts Manually

If you are comfortable with adding custom code to your website, there is another way to disable Google Fonts.

The benefit of this second method is that you can disable the font requests individually, rather than all at once. This can be useful if you do want to keep some of the fonts.

First, view the source of your website and search for the code `fonts.google.com. You should find one or more lines that looks something like this:

<link rel='stylesheet' id='google-fonts-roboto-css'  href='https://fonts.googleapis.com/css?family=Roboto' type='text/css' media='all' />

The important part is the ID, google-fonts-css in this case.

Once you have the ID, you can add this code to your theme’s (or child theme’s) functions.php file:

function remove_google_fonts_stylesheet() {  
    wp_dequeue_style( 'google-fonts-roboto' );
}
add_action( 'wp_enqueue_scripts', 'remove_google_fonts_stylesheet', 999 );

Note that you need to remove the -css from the ID, otherwise this won’t work.

Conclusion

In this article we’ve looked at how to disable Google Fonts completely, or on an individual basis.

We hope you’ve found this useful. If you have, please consider sharing it on Facebook or Twitter.