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!

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 was like: “I can’t. It’s too much.”

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 CAOS for Webfonts

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

CAOS for Webfonts’ Banner. Isn’t she a beaut!?

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.

Installing the Plugin 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:

From within your WordPress admin-area, go to Plugins > Add new.

Enter ‘CAOS’ (without the quotes) in the search bar.

Choose the pink one and click ‘Install now’. Once it’s done, click ‘Activate’.

Configure CAOS for Webfonts

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:

If you don’t know it already, figure out the name of the font your blog is using. I usually do this by clicking my right mouse button on any line of text and choosing ‘Inspect element’ to open the browser’s Developer Tools. Need help? A quick Google search handed me this tutorial written by a really happy looking couple.

Although they don’t get cool points for using anything CAOS related, the tutorial is actually helpful.

How to Configure CAOS for Webfonts

Go to Settings > Optimize Webfonts.

Enter your font’s name in the search bar — to add more, wait till the previous search finished, empty the search box and enter the next font’s name. Add as many different fonts as you like!

Trim the list to include only the fonts your theme actually uses. I usually remove all the ‘italic’ ones, because any modern browser can fake italic fonts.

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 minute. The download counter underneath the button will give you a hint of its current status.

Click ‘Generate stylesheet’.

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.

I use an integrated option in Autoptimize for this, because I’m already using that plugin for minification of my CSS and JS and I suggest you do too — because it’s lightweight and awesome. But if you (are lame and) don’t (want to) use Autoptimize, there’s plenty of other ways to achieve this. Either manually or through plugins.

Some themes offer an integrated toggle for this in the Theme’s options. If your theme doesn’t, there are many other ways to achieve this.

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.

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?

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…

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!

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.

Choose Amount:

Personal Message:

Wake me up in case of:

This website uses cookies to display contextual advertising for users in the European Economic Area (EEA). No personal information is collected in this process. For users outside the EEA we use cookies to display personal advertising. If you want to know more or withdraw your consent to all or some of the cookies, please refer to the privacy policy. By closing this banner or continuing to browse otherwise, you agree to the use of cookies.DismissPrivacy Policy