How to Remove Google Fonts from your WordPress Theme

I’ve been getting a lot of requests lately, to implement a ‘Remove Google Fonts’-option into OMGF.

After a lot of research (a few months!) I managed to implement an efficient way to do it. Version 1.9.0 contains an experimental option to remove any Google Fonts that are enqueued in your WordPress blog.

But, for those where it doesn’t work, or for those that want to have full control, I provided an alternative: a complete guide on how to remove Google Fonts from your WordPress Theme.

Why should I Remove Google Fonts?

Your motivation to remove the externally hosted Google Fonts from your blog may differ. It might be a design or programming choice, but in most cases the reason is site optimization. External requests slow down your site’s loading speed. That’s why it’s a smart choice to move external files to your own server and host them locally. Even Google says so.

The same goes for Google Fonts. But moving them to your server can be quite an exhausting process, especially if you’re using a lot of different fonts, weights and styles. To make this process easier, I created OMGF: a WordPress plugin which automatically downloads any Google Fonts it finds and serves them from your server.

If you’re an absolute speed-freak, and you don’t care for Google Fonts. You might want to get rid of them entirely. Today we’re going to discuss different ways — in varying difficulties — to remove Google Fonts from WordPress.

Easy: remove Google Fonts using OMGF

OMGF offers and Unload All option to remove Google Fonts from WordPress.
OMGF v5’s Unload All feature grants you fine-grained control over which Google Fonts you’d like to remove and/or keep (and load locally).

Because it’s not smart to blindly remove Google Fonts, OMGF’s automatic removal feature has been removed in v5.0.0. The plugin now offers fine grained control and allows you to specify which fonts (or font styles) to remove (or, unload) and which you’d like to keep.

After running OMGF’s Save & Optimize routine once, you can easily remove (unload) Google Fonts in the Manage Optimize Fonts section, by clicking the Unload All link next to a font-family.

Any fonts you decide to keep are automatically loaded from your server, i.e. hosted locally.

Pro-tip: leverage OMGF Pro’s Fallback Font Stack feature to specify which system font (stack) should replace your Google Fonts. If you’re a speed freak, this is what you’re looking for.

  • The Wait is Over!

  • Easy: Automatically remove Google Fonts using Autoptimize

    Another easy way is to use Autoptimize, but I can’t stress this enough: blindly removing Google Fonts gives no guarantee what your pages will look like in different browsers and/or operating systems. Chances are, visitors will view your pages in Times New Roman. Who wants that?

    A WordPress plugin which I’ve mentioned several times, due its incredible optimization capacities. Simply put, if you want to achieve a high score on Google Pagespeed, Autoptimize’s the way to go. One of its options is — guess what? — it removes Google Fonts..

    How to Remove Google Fonts using Autoptimize
    How to Remove Google Fonts using Autoptimize

    Assuming you’ve already installed Autoptimize from the WordPress Plugin Directory, go to its settings page (Settings > Autoptimize) and:

    1. Click on the ‘Extra‘-tab,
    2. Select ‘remove Google Fonts‘ from the Google Fonts options menu,
    3. Click ‘Save‘.

    As promised, that was easy, right?

    Now, if for some reason you don’t like easy, and you skipped reading this entire chapter, because it was too short and boring for you. Keep reading. Now we’re gonna get down and dirty.

    Hard: Manually remove Fonts from WordPress using a Child Theme

    This option is mostly convenient, if you’re already running all sorts of custom optimizations on your site, preventing you to install Autoptimize. In mostly all other cases, I seriously suggest you step back to the previous chapter.

    The hard way to remove Google Fonts from your WordPress theme involves creating a child theme. You’ll also need a basic understanding of PHP and Bash.

    If these words mean nothing to you, I suggest you skip back to the first chapter of this post and install OMGF.

    Before contuing, make sure you’ve created a child theme for your theme following the steps from the WordPress documentation. After you’ve activated and verified it’s working, continue.

    The steps are the same for every theme, the function name’s will just differ.

    Find out which function loads the Fonts

    Google Fonts are loaded from an URL looking similar to this:

    https://fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,700|Roboto+Slab:400,300,700

    So the smartest way to find out the name of the function loading the fonts is to look for it using a terminal command called grep. E.g. grep "googleapis\|gstatic" * -r will return a list of all files containing the word ‘googleapis‘ or ‘gstatic‘. Make sure to trigger this command inside your theme’s folder.

    Dequeueing the stylesheet

    grep should return one file. Open that file using your favourite IDE (such as PHPStorm or Notepad++) and locate the function containing the Google Fonts URL.

    The URL is probably wrapped inside a function called wp_enqueue_style or wp_register_style. What we need from this function is the value of the first parameter, called the ‘handle’. This is what we’ll use to ‘dequeue’ the fonts in our Child Theme’s functions.php.

    E.g. in my theme (Sparkling) the fonts are enqueued as follows:

    wp_register_style('sparkling-fonts', '//fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,700|Roboto+Slab:400,300,700');

    So I’ll be using the handle ‘sparkling-fonts‘ to dequeue it in my child theme.

    We can do this by adding the following code to the Child Theme’s functions.php:

    <?php
    // The start of my Child Theme's functions.php
    function sparkling_remove_google_fonts() {
    wp_dequeue_style('sparkling-fonts');
    wp_deregister_style('sparkling-fonts');
    }
    add_action('wp_enqueue_scripts', 'sparkling_remove_google_fonts', 100);
    view raw functions.php hosted with ❤ by GitHub

    When activating the child theme (make sure you’ve enqueued the parent’s theme styles, etc. as described in the WP dev-docs!) you’ll see that the function loading the Google Fonts isn’t triggered anymore.

    Summary

    Hosting Google Fonts from your own server can be beneficial to the speed of your WordPress blog, that’s why it is recommed to remove the externally hosted Google Fonts from your WordPress theme. There are many ways to remove Google Fonts from your WordPress theme. In this post I’ve described the easiest way (using OMGF or another plugin) and provided a (harder) alternative (using a Child Theme) for those longing for more flexibility.

    ❤️ it? Share it!

    15 thoughts on “How to Remove Google Fonts from your WordPress Theme”

    1. Hello Daan ty so much for create those plugins, i have in my web site https://bellisimasnails.com install your plugin and i did everything you say, also disable from autoptimize and in your plugin, but continues show me the google fonts, I use EDUMA (theme) and i have my web site in Cloudflare and Cloudways, i dont know what else to do… Juts Google Fonts continue appears.

    2. I downloaded the plugin today and it’s working perfect. But i don’t understand it very well. I use the divi theme and i de-activated use google fonts over there, but when I go into the visual builder all my fonts are gone. So I can use this plugin but I need to active google fonts in my theme to make updates, rescan my fonts with omgf and then de-activate it again in divi. Am I right that there isn’t a simple way to keep using my fonts if I am updating pages in divi with google font disabled in divi settings?

      1. Hi Jelle,

        You should disable the ‘Optimize for Logged In Users’ option under Advanced Settings. That’ll make the fonts appear when using a page builder, such as Divi.

    Leave a Comment

    Your email address will not be published.

    This site uses Akismet to reduce spam. Learn how your comment data is processed.

    Shopping Cart
    • Your cart is empty.