How to Locally Host Google Fonts and Leverage Browser Caching

Google Fonts. Every WordPress blogger uses them. It’s an easy — if not the easiest — way to improve your blog’s looks. Pagespeed Insights. We’ve all heard of that too. And we all want to achieve the highest possible score. Both are brought to you by the same entity we’ve come to know, love — and hate: Google. Love, because they gave us these beautiful fonts. Hate, because as soon as we use them, it lowers our score on Pagespeed Insights!

Today I’m showing you how you can achieve the best of both worlds:

  1. Maintain your high score on Pagespeed Insights by leveraging your browser cache, and
  2. Keep using your Google Fonts by hosting them locally.

And I promise you, it couldn’t be easier.

Locally Hosting Google Fonts shouldn’t be so Difficult.

I know, the web is flooded with tutorials about the essentials of leveraging your browser cache by hosting Google fonts locally. But to be honest: they’re long and boring.

They all explain which files to download, how to upload them to your WordPress blog, how to create a stylesheet, how to add your Google Fonts to said stylesheet, how to enqueue the stylesheet into your WordPress blog, and how to — well, I don’t know. A lot!

When I recently redesigned my blog (well, not really. I used a theme) I lost all my optimizations and my score on Pagespeed Insights plummeted. In other words, I came back around to this tiresome job and I was like:

I’m a backend developer. I don’t want to spend my time creating a stylesheet — no offense. I’d rather spend two days automating a tiresome — booooring — process, than spending one minute exercising said process.

And so I did. You’re welcome.

Host Google Fonts Locally in WordPress using OMGF

This post contains outdated information. It is based on OMGF v3.x. The most recent version of OMGF is v4.x, which contains a bunch of changes in the interface and UX. Refer to the manual for instructions on how to use and configure OMGF and OMGF Pro.

POW! There it is! Because of my frustration and arrogance, you now have a powerful WordPress plugin at your disposal. And it’s called OMGF. Not CAOS. No. I guess weird abreviations are my brand now. Consider this his beautiful baby sister. Her name is OMGF.

Because of her, you don’t have to download anything. You don’t have to unpack anything. You don’t have to upload anything. And you don’t have to create anything — especially a frickin’ stylesheet. No offense.

All you have to do is install the plugin from the WordPress repository, select your fonts, and click a few buttons. Let’s do this.

Request my OMGF Expert Configuration service if you’re not sure what you’re doing and/or can’t get it to work. Read more

Installing the Plugin from the WordPress Repository

Search for OMGF in WordPress Plugins Repository

I assume you’ve done this before. I’ll just leave it here for full disclosure:

  1. From within your WordPress admin-area, go to Plugins > Add new.
  2. Enter ‘OMGF’ (without the quotes) in the search bar.
  3. Choose the pink one and click ‘Install now’. Once it’s done, click ‘Activate’.

How to Configure OMGF

Although the WordPress plugin works fairly straight forward. I thought it might be a good idea to give you a quick crash course. Pay attention.

In theory, you could use this plugin (and its Additional Fonts add on) to change your blog’s fonts to anything you like, but we will not be covering that in this tutorial as we’ll have to touch a stylesheet. And if you’ve been paying attention, you’d know that I don’t like stylesheets — no offense.

Most users will want to replace the fonts they’re already using with locally hosted ones. Here’s how you do this:

  1. Go to Settings > Optimize Webfonts.
  2. Scroll down the settings page and click Save & Optimize.

You should see a message at the top of the screen, saying Optimization completed successfully. If you’re seeing an error or warning message, please refer to the Troubleshooting section of OMGF’s documentation.

Once the optimization has completed successfully, scroll down the settings page and you’ll notice the Manage Optimized Fonts section has populated with (several) stylesheets, containing font families and font styles.

The optimize Google Fonts section of OMGF gives you an overview of all locally hosted Google Fonts in your WordPress configuration.
The Optimized Google Fonts section of OMGF v4 will give you an easily configurable overview of all locally hosted Google Fonts on your WordPress configuration.

All the fonts in the list are already downloaded to your server and OMGF will make sure they are served when visitors (or you) view your site.

To tweak your Google Fonts’ performance further, OMGF offers the option to unload unused Google Fonts and preload fonts used above the fold.

OMGF Pro offers several advanced ways to further Optimize your Google Fonts’ performance, including serving font files from your CND, Subsets Forcing and setting Fallback Font Stacks. Click here to read more about OMGF Pro and use the coupon code BIGFANOFYOURBLOG to get a 10% discount on your purchase!

See how easy that was? No 12-step program here!

Below are some more tips on how you can further optimize the performance of your Google Fonts.

  • The Wait is Over.

    Get the Newsletter you've always wanted, now!

    Sign up to receive monthly, Special Offers & Free Optimization Tips for WordPress.

    Privacy Policy

    No spam. I promise.

  • Unloading Italic Font Styles

    I’d strongly suggest unloading any Italic font styles as Modern browsers are perfectly capable of mimicking italics using the regular font styles of any font family.

    Instruct OMGF to do so, by simply clicking Unload Italics next to each Font Family’s name.

    Many theme developers simply request all available font styles when using Google Fonts. So in some situations, using this option can shrink down your stylesheet by 50% — and chop of 50 – 100KB of your page size as well!

    Using OMGF's Unload Italics option, I was able to remove 6 requests and increase Google Fonts performance!
    Using OMGF’s Unload Italics option, I was able to remove 6 requests and optimize Google Fonts! Chopped ~50KB of my pagesize!

    Preload Google Fonts used Above the Fold

    Cumulative Layout Shifting is often caused by Google Fonts.

    The browser loads your page and first renders its text in a default system font. Then it stumbles upon the stylesheet for Google Fonts and loads them. This causes the text to shift around.

    We don’t want that, do we?

    To further optimize your Google Fonts I’d recommend preloading all font styles used above the fold.

    Don’t Preload All Fonts!

    Don’t preload all your Google Fonts. This is not a better safe than sorry scenario.

    Preloading all your Google Fonts (even those below the fold) will slow down initial rendering time and decrease your score in Google PageSpeed Insights for Largest Contentful Paint (LCP).

    What’s Above the Fold, you ask? Well, anything above the green dotted line is!

    Why should I host Google Fonts locally?

    Locally hosting your Google Fonts gives a great increase in page load times, because your visitor’s browser doesn’t have to make a round-trip to Google’s servers to retrieve the files. It also gives you full control of the files’ expiry time, eliminating the Leverage Browser Caching notice on sites offering performance metrics, such as GTMetrix, Pagespeed Insights and Pingdom.

    78 thoughts on “How to Locally Host Google Fonts and Leverage Browser Caching”

    1. Wow Man, a great write up, I have been using COAS on my older blogs, just found out the name change and installed on my new blog too.

      Now I am going to install the webfonts plugin and will definitely share my feedback here.

      Thumbs up 🙂

    2. It seems like every time I type in a font name and generate a stylesheet, it overwrites the prior one I’d created. Also doesn’t seem to work if I type in multiple font names, whether separated by spaces, commas, or otherwise. How does this work for multiple fonts?

      1. Yeah, I see it works a little counter intuitive at this point. I’ll definitely take this up in a future update.

        At this point, when you search, the found fonts are entered in the list. When you remove your search query and look for another font, the newly found fonts are added to the same list.

        I should really pay more attentiont to User Experience in my next release. Thanks for letting me know, Sam!

    3. First. Great plugin. Many thanks and hurrays!
      Now a question.
      So I’m done so far as I got this message
      “Stylesheet was successfully generated and added to your theme’s header.0”
      Looks a bit buggy with that 0? anyway…

      What did actually happen?
      Did it modify the theme’s template file?

      1. Yes, of course. Al you need to do is:
        – Download the fonts.
        – Download the stylesheet (your link).
        – Save it on your server and change the URL (inside the src: url(”)) to the full URL on your server.
        – Done!

    4. Hi Daan,

      Thanks for the great plugin! My only question is, you say to turn the fonts off in the theme or remove any mention of them.

      However, I use Themify and there is a toggle in the theme settings, but then it turns off the fonts altogether. How can I stop calling for downloaded fonts, but still use them in my theme, if that’s what I’m supposed to do? Cheers.

      1. Hi David,

        Good question!

        The goal we want to achieve is that the CSS remains unchanged, e.g.

        body {
            font-family: 'Roboto';
        }
        

        This should remain! We just want to use our own stylesheet where the url’s of the stylesheet are defined, instead of the one hosted on Google’s servers.

        What I think I understand from your message, is that when you switch the toggle in Themify, this removes the mention of the font in the CSS as well. Correct?

        I did a little Googling and found this page: https://themify.me/docs/enqueue-scripts, so I think this should do the trick:

        After creating the child theme (as mentioned in the article), add the following code snippet to the child theme’s functions.php:

        add_action('wp_enqueue_scripts', 'daan_remove_scripts', 20);
        
        function daan_remove_scripts(){
            wp_dequeue_style( 'google-fonts' );
        }
        

        Let me know how that goes!

    5. How do I block elementor page builder, astra theme and wordpress if needed, from making google fonts requests? I use autoptimize. I tried to set it to block google fonts in the “extra” tab, but then it doesnt load the locally stored fonts instead.

      1. That can’t be right. Autoptimize only blocks the fonts loaded from Google’s servers as it recognizes Google Fonts by the url (e.g. fonts.google.com). So you should be able to use this option without any problems.

        Is the fonts.css generated by OMGF loaded? If not, then the problem is probably your theme.

        In that case you should create a child theme which loads the stylesheet and disables astra’s google fonts.

        If you don’t know how to do this, please contact me using the contact form and I’ll try and help you out.

    6. Hi Daan,

      How can I check if my stylesheet with the fonts is still active? I have the idea that it has been deleted.

      Cheers,
      Stefan

      1. This is why every browser has an ‘Inspector’! 🙂

        Open up your browser’s inspector tools (usually by pressing F12) and go to the tab ‘Network’ (in Chrome and Firefox). Reload the page and check if a file called fonts.css is loaded — make sure to disable any combine/minify plugins and clear your caches before doing this! If it is loaded, you know it’s there. If it’s not, try to re-download and re-generate the stylesheet. If you’re using WP Super Cache (or an equivalent) it might be this is deleting the stylesheet whenever you clean the cache. In that case you should also change the path where CAOS saves the stylesheet and fonts.

    7. Hi there,

      Great post, just looking for some advice – when I do the Pagespeed test, the results advise:

      “Ensure text remains visible during webfont load
      Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading. ”

      and

      “Serve static assets with an efficient cache policy
      8 resources found
      A long cache lifetime can speed up repeat visits to your page.”

      How would you recommend to resolve the above – I use WPRocket and stackpath CDN.

      Thank you.

      1. Hi Jonathan, I’m sorry I never replied to your comment. Hope you still get to read it.

        The first issue can be resolved by setting the Font-Display option to ‘Swap’. The 2nd issue needs to be resolved on your server. Except if it lists external resources, there’s nothing you can do about that.

    Leave a Comment

    Your email address will not be published. Required fields are marked *

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