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.

  • The Wait is Over.

    Get the Newsletter you've always wanted, now!

    Sign up to receive Biweekly, Free Optimization Tips for WordPress.

    No spam. I promise.

  • Host Google Fonts Locally in WordPress using OMGF

    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’.

    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 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:

    Auto Detect Google Fonts
    1. Go to Settings > Optimize Webfonts.
    2. Click ‘Auto-detect’ and wait for the on-screen instructions.
    3. Click the link to ‘your latest post’ or open any other page. In most situations, it doesn’t matter.
    4. After the page has finished loading, return to OMGF’s settings screen and click ‘Refresh’ (or CMD / CTRL + SHIFT + R).
    5. Your theme’s used subsets and fonts will automatically appear in the list.
    6. Sometimes Google Pagespeed Insights notifies you to ‘preload critical assets to improve loading speed‘. If any of the fonts are mentioned in this list, check the ‘preload’ checkbox next to that font. To improve performance further, you can also safely remove all italic fonts.
    7. Click ‘Download Fonts’ and wait for the command to complete. Depending on the size of your list and the speed of your server, this might take a few minutes. The download counter underneath the button will give you a hint of its current status.
    8. Click ‘Generate stylesheet’.
    9. Done!

    See how easy that was? No 12-step program here! Your fonts have been downloaded and saved on your server, the stylesheet has been generated and added to your theme’s header.

    Removing externally hosted Fonts

    Now the only thing left to do is remove any mention of externally hosted Google Fonts from your Blog.

    Since version 1.9.0, OMGF supports a ‘Remove Google Fonts’ feature. Which takes care of all Google Fonts added using conventional methods. If OMGF isn’t able to detect Google Fonts, because they’re added e.g. in the footer, or using Web Font Loader, consider upgrading to OMGF Pro.

    Some themes offer an option to disable Google Fonts. If your theme doesn’t, there are many other ways to achieve this.

    If none of these suggestions work for you, comsider hiring me (€ 99,-) to build you a custom plugin to remove your Google Fonts.

    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.

    Daan van den Bergh

    Daan van den Bergh is a carefully seasoned web developer. His methods consist of thinly slicing your website’s beef and serve you with a platter of the best performance carpaccio on a bed of rocket — the only thing he’s more passionate about is food. Hire him at ffwp.dev.

    75 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 :)

      Reply
    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?

      Reply
      • 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!

        Reply
    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?

      Reply

    Leave a Comment

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