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:
- Extract the CSS
- Minify it
- 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!
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!
What if the page that uses google fonts belongs to someone else’s web site. Can you use a tool like Tampermonkey to inject that code into the page to remove the web fonts from their css? One of my customers has me use VPN to manage their site, and the VPN does not have internet access for security reasons. A Web app I use to to manage their apps uses google fonts. Every time I load the Web app page, I have to wait several minutes for the Web font request to timeout and load it’s default fonts.
John Williamson says
Isn’t this still not truly hosting them locally because it still makes calls to the Google Fonts URL’s, or am I missing something?
Bhagwad Park says
No, you’re right. If you want, you can go the additional step and modify the fonts file itself to point to static resources on your own site.
It’s a big pain though, so I don’t imagine most people would do it…
Brian Johnson says
I think CSS minifier is probably the single most under-utilized tool for speeding up sites. The amount of unnecessary CSS bloat that blogs have is unreal. I saw a dramatic drop in page load time from reducing CSS bloat.
That is quite ture. The minification process can reduce the size up to 90%. So this will help the website running faster and then get high Search Engine Optimization (SEO) score
Michael Moriarty says
How do you determine what characters to include? By that I mean what unicode range?
Michael Moriarty says
Does it help to use something like font-squirrel to select just the portions of the font you want and then convert to a base 64 string?