in ,

How to Locally Host Google Fonts and Leverage Browser Caching

How to Host Google Fonts Locally in Wordpress

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

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

Installing CAOS from the WordPress Repository.
Installing CAOS from the WordPress 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:

How to Configure OMGF

How to Configure OMGF
  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.
    1. Note: Open Sans and Noto Serif are always detected, but unchecked by default. That’s because those are WordPress’ own default fonts for the Administrator area. Unless your theme is using those fonts as well, leave them unchecked.
  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.
  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. It’s experimental, because there are some scenario’s in which I can imagine that it wouldn’t work. But it should work in most situations.

I use OMGF’s integrated feature. But you can also use an integrated option in Autoptimize for this, if you’re already using that plugin for minification of CSS and JS.

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.

Written by Daan van den Bergh

Magento 2 Developer by day. WordPress Plugin Developer by night. Wordpress Optimization Super Hero at WoOSH! Passionate about trainlifting, airplane-gliding, hunting trees and creating fake hobbies.


Leave a Reply
  1. Wow Man, a great write up, I have been using the COAS for Analytics 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?

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

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

    • 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:, 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.

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


    • 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. ”


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

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

  8. Hi Daan,

    Firstly, many thanks for writing CAOS and OMGF. It’s very generous of you to share your expertise like this.

    Being a beginner (I’ve just set-up my first blog) I really appreciate the guidance that you provide for installing your plugins. Which leads me to … is there any way for OMGF to detect what fonts the user has used? This stuff is all new to me and it took me a while to track down what font was in use – for anybody else using the OceanWP theme the default font is Open Sans. An addition for a future update perhaps?

    Thanks again,

    • I’ve looked into this many times, Richie. Thanks for the suggestion, though. Till now I haven’t found a solid way to implement this without sacrificing performance, etc.

      If I ever find one, it would definitely be a great addition to OMGF, but for now, I’m afraid I prefer to keep this plugin nice and tidy. The way it is.

  9. Hi Daan,

    Thank you for this awesome plugin. It’s really a piece of cake to handle the fonts! Just one question. I use Droid Sans on my page and I can’t find it from within your plugin. Is there a way to manually upload the font and still use your plugin?


    • Hi Samuel,

      Droid Sans is not available, since it is not hosted on Google Fonts, but on Monotype.

      Currently, OMGF does not support uploading custom fonts. But I’ll keep it on my list, as a feature to be added. Thanks for the suggestion!

  10. Hi Daan,
    First of all, thanks for the supplement and for the explanations, but I have a problem, when I save the source I tell to do it on my child theme, but when I go to my editor I do not see the source, I really do not know what I am doing wrong and I would so much be grateful for your help.

  11. Hi,

    I was recommended to use this plug in and installed but after installing, I could not figure out to set up. I try to download fonts but does not see. Also I could not find which google font is using in theme.

  12. Hi Daan

    Very grateful for your plugin!

    Is there an option to add 2 URLS to the CDN option? Cloudflare has provided me with 2 options..


  13. OMG! finally! after hours of searching on google, that ‘s exactly what I need!
    Will test this ASAP. Thanks for this perfect work.
    Just one quick question, is there anything to add specifically for these local fonts in htacess to ensure a long caching ?

  14. Hey Daan, Thanks for the plugin. If I still see this in the header : type=”text/css” rel=”stylesheet” href=”//,500,600,700,800%7CLato:300,400,700%7CRaleway”

    Does it mean it did not work? Shouldn’t the href be pointed to somewhere on my server?


  15. Hello Daan,
    I am totally new to WordPress and HTML or CSS but I with your plugins help I managed to cut of the Google Fonts my theme was using. The stylesheet was generated and I see the fonts.css is being loaded.
    I guess I did not get it fully yet but what do I have to do to actually use the new fonts I downloaded. I would be very thankful if you could point me to some help.
    Thanks a lot

  16. Dear Daan, thank you for this great plugin. Unfortunately the plugin wouldn’t download the fonts to the folder (font name “IBM Plex Sans”) from Google Fonts. I already tried to set write permissions with FTP (777) etc., but it wouldn’t work. The plugin also only creates a css file with only the header data. I guess this is a permission issue? Is there anything else I need to do? Version is 2.1.1 with WordPress 5.3.
    Thank you!

  17. Hi Daan, thanks for the great plugin!
    In working with the plugin, 2 questions came to mind.
    How to remove an installed font-weight or how to add a font to an installed set of fonts? Just re-download and re-generate stylesheet?
    The other issue addresses the use of a subset of the complete alphabet (&text=). Can this be accomplished with your plugin?
    Thanks in advance.
    Kind regards.

    • Hi Wyb,

      You can just remove the font you don’t need anymore and re-generate the stylesheet.

      As for your second question, more and more people are asking me about this. I’ll see what I can do about this. At this point it cannot be done with the plugin.

      • It was on font-display: swap before. I changed it to ‘fallback’. But Google pagespeed insight is still suggesting that I “ensure the text remains visible during font load”.

        Though I noticed that the body of my website now displays text during font load.

        What is left is hero section which I made with Slider Revolution.

        Website is

  18. Hi Daan,

    the plugin sounds great. Just one question: Can it be uninstalled once everything has been done?


    • Hi Bettina,

      No, it can’t. But that’s on purpose. :)

      A good plugin doesn’t make permanent changes to other files (which would be required in what you’re asking). This is to make sure that everything will keep working as intended after e.g. updates or other changes.

  19. Saludos desde Venezuela amigo, muy agradecido por su trabajo, y felicitaciones por su gran calidad.
    Una consulta a ver si me puede apoyar. Ese listado que donde aparece la etiqueta “Preload”, y luego al lado de cada casilla la opcion “remove”. ¿Para que sirve? Hay que hacer algo adicional alli para optimizar el manejo de las fuentes?
    Muchas gracias de antemano.

  20. Hi Daan,

    I installed the plugin and activated it. However when I click on auto detect I get this error message:

    Table wpkc_omgf_fonts does not exist and is necessary for OMGF to function properly. Try manually de-activating and activating the plugin via the WordPress plugins screen.

    Any idea how I can fix this? I tried deactivating the plugin and reactivating it, but it did not work.


    • Hi Jaco,

      Did you also post your question on the Support Forum or did another Jaco ask the same question there? Anyway, I’ll copy the answer here: :-)

      1. Go to your wp_options table in your database (the prefix wp might be different),
      2. Remove the line called omgf_db_version,
      3. Reload any page in the admin-area.

      Is the error gone?

      • Hi. I have no idea where the support forum is so sorry to post this here.

        I deleted the row omgf_db_version & reloaded the admin page
        and still received

        “Table wpkc_omgf_fonts does not exist and is necessary for OMGF to function properly.”

        Any ideas?

  21. Very nice plugin, all seems to be working, but a little confused….

    Site is using Questrial 400, 600 weight, but when I did auto scan it only found 400. I created the CSS and fonts are no longer loaded from Google, but there is no 600 weight in the CSS or local font, but it’s still displaying buttons using 600 weight. I have cleared cache, but if I use font inspector it says Weight 600, Style Normal for buttons and Weight Normal, Style Normal for body text.

    Any ideas??

    • Hi Darren,

      Short and simple answer: every browser is capable of faking font styles, if the regular style (400) is available. :)

      So, since you have 400 present, the browser mimics a thicker font, even an italic style. But, for example, you won’t see a difference between weight 600 and 900.

      • Okay makes sense, so basically I don’t need to worry about it? I wish your plugin localised Typekit fonts, they are slower than Google fonts!

  22. Thanks for your plugin. I’ve installed it and tried to use it on my website (which is in Arabic language and using Arabic fonts).

    I think the plugin wasn’t enable to detect the font(s), as it shows an empty cell. Also when I click download it gives me “NaN%”. Can you please help me with that? This is the font I’m using in my website “Droid Arabic Kufi” – 400

    Thanks in advance

Leave a Reply

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.