How To Load Google Fonts Locally To Speed Up Your Site

One of the most basic principles of site speed is to reduce the number of domains that your page requests on each load. To this end, I’ve come to the opinion that a CDN like CloudFlare’s reverse proxy is much more efficient than traditional CDN networks since it doesn’t need to resolve an additional domain.

Taking this logic to the extreme, it would seem logical to keep all assets on your local domain, and cache them at EDGE locations with Cloudflare. Indeed, this is my preferred approach at this point, and the one that’s bringing me the best results so far.

It makes sense to apply this same approach to Google’s fonts as well. In an earlier article, I’d shown you how to load add Google Fonts to a WordPress installation by getting the URL for the fonts and loading it in the header via a piece of PHP code. In this tutorial, I’ll show you how to “inline” the fonts instead and perform even more modifications to speed up your site.

Looking at Extra Connections

If you load Google Fonts the “traditional” way that Google expects you to, you’ll see something like this in your waterfall view when you analyze the way your site loads:

As you can see, the actual connection and download time of the fonts is pretty fast. Just 169 ms. Unfortunately, that time is dwarfed by the time required to connect to the DNS, make the connection and negotiate the SSL certificate. It’s a shame that such a small file needs to have so many resources dedicated to it.

Moreover, you can see that it’s render blocking! The Google fonts here are preventing the entire page from loading till they’re downloaded. This is a pretty serious problem.

So we’re going to do the following:

1. Extract the CSS
2. Minify it
3. Place it in an “inline CSS” section

Getting the CSS from the File

From the previous tutorial, you probably got a Google Fonts URL that looks something like this;

<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">

Extract the URL in the “href” tag and paste it into your browser. You should get something like this:

This is the CSS that is being downloaded each and every time a visitor loads your page. Copy all of it and paste it into notepad or some other text editor.

Minify the CSS

The CSS you downloaded is “pretty” with comments, whitespaces etc. Since we’re going to insert this on every page load, we want it to be as small as possible. For this, we’re going to use a CSS minifier tool. There are lots of them on the web. The site cssminifier.com is a good place to start.

Paste your CSS into the box on the left-hand side and click “Minify”. You’ll get the “Minified Output” on the right-hand side.

Inserting the Minified Output onto your Pages

There are many ways to do this. The most direct is to enclose the minified CSS in “style” tags like this:

<style type="text/css">

[Minified CSS here]

</style>

And then paste it into the header of every page on your installation. How you do this depends on your CMS and theme. If you’re using WordPress, your theme might have a section to insert scripts into the header, like Genesis. Another option is to use the neat Autoptimize plugin and use the “inline CSS” section. Like this:

I recommend the second approach for WordPress. If you have another CMS like Joomla, you’ll need to find appropriate solutions for that.

Once you’re done, your Google fonts should load without delaying the page. And now that you’ve removed an additional domain lookup, you should get much better page speeds, as well as fewer warnings from Google that complain about render blocking resources!

Bhagwad Park

I’m a NameHero team member, and an expert on WordPress and web hosting. I’ve been in this industry since 2008. I’ve also developed apps on Android and have written extensive tutorials on managing Linux servers. You can contact me on my website WP-Tweaks.com!