4 Reasons Why You Should Self Host Google Fonts

pinterestPinterestlinkedinLinkedInredditReddit

Bloggers and website owners are always worried about how well their website is optimized in hopes that improving their website performance will improve their user experience metrics – the accepted notion being that a better user experience will help translate into improved SEO ranking. One often overlooked way that website owners can improve their site performance is through self hosting their website’s fonts instead of using Google Fonts to provide them.

Before you even ask if it’s legal for you to host fonts from Google Fonts on your own server – the answer is YES. The fonts are licensed under open source licenses making it perfectly fine for you to download and redistribute the fonts yourself.

Now with that out of the way, allow me to explain why self hosting your fonts is the way to go.

1 – GDPR Compliance

If your website is required to be GDPR compliant and you make use of Google Fonts for your website then your website is not GDPR compliant. A German court recently ruled that “embedding of Google Fonts on a website violates GDPR because such use of Google Fonts does not comply with any of the legal bases that can be used for processing personal data. GDPR generally prohibits the collection and use of personal data (such as the IP address collected by Google Fonts)(source Termageddon)

As a quick aside, there have been similar rulings by multiple courts in Europe (France and Austria so far) that Google Analytics also violates GDPR. This leads me to my next point …

2 – AVOID Reliance On Third Party Servers

This is some good easy to understand general advice. Your website should rely as little as possible on someone else keeping their servers running – including Google. While it’s not a common occurrence, it’s not unheard of for even large hyperscalers like Google or AWS to have server or network outages.

If Google were to experience an outage that affects their font servers while your site remains online – unless a visitor has been to your site in the last 24 hours that they still have CSS from Google for the fonts cached, your visitors are going to experience a vastly sub-optimal version of your website.

Unless your website is extremely simple, it’s likely that your site requires a connection back to at least one third party for it to function fully – say for your analytics or mailing list subscription forms or advertising. As much as possible though, the more you can reduce the number of third parties by hosting things yourself the less opportunity there is for there to be problems related to server and network outages.

3 – Full Control Over Caching & Implementation

You might think that commonly used fonts hosted by Google are likely to be cached in most people’s browsers already and as a result they’ll speed up the loading of your own website. While the font files themselves, which get served by Google’s fonts.gstatic.com domain, will remain in a browser cache for up to 1 year (barring that someone hasn’t cleared their browser cache) – the CSS used to load these fonts into your website gets loaded from fonts.googleapis.com with a cache policy of only 24 hours. If this assumption were true, at best your visitor would have to have previously cached the CSS for the font in the last day.

More importantly, modern web browsers (including Chrome, Firefox, and Safari), as a security measure, implement cache partitioning – the browser will not allow one website to load cached data stored in the browser from another website. With this, the entire idea that the fonts you use might already be cached on someone’s browser from somewhere else and that this will help you by extension goes right out the window.

When you self host your web fonts, not only do you get full control over how your font files are cached to future visitors, but you also have full control over if and how your fonts are configured for preloading / make use of the CSS font-display property (this controls whether text loads on the screen before or after your fonts have loaded and is an entire discussion in itself) – especially if your website is one of the 40%+ on the internet that use WordPress. Depending on how the developer of your WordPress theme implemented font support, your website might not implement either of these features, causing your site to be even less optimized.

4 – Faster Than Google

Faster than Google? Surely I’m kidding, right? I’ve saved the longer more technical bits for last, but stay with me here. I’ll keep it simple to understand and this is the stuff that matters most.

You wouldn’t be alone if you think that Google, being Google, is going to host the fonts to your visitors faster than you possibly could. The truth is, any decently hosted website – especially one that makes use of a CDN like Cloudflare ( and every website should be using a CDN) – is going to load your fonts faster than Google can. Let’s look at why.

DNS, SSL, and HTTP/2

Don’t worry if you don’t know what those acronyms are, already. I’ll briefly explain what they are and how they’re relevant. Let’s start with discussing DNS and how it relates to how your website loads.

DNS stands for Domain Name Service. You might already have been exposed to this term when you setup your website. Your domain points to at least two DNS servers, for example, in order for it to be hosted.

Think of DNS as being the internet equivalent of a phone book – yes I’m possibly carbon dating myself here with the comarison, but it’s a good one. When you look up a name in a phone book, you get the number to dial to reach the person you want to talk to. DNS works much the same way. You give DNS the domain you wish to visit – say www.techaddressed.com – and it returns back to your browser the IP address associated with that domain so it knows how to contact the server and retrieve the page.

SSL is likely another term you’ve come across when setting up your website. SSL is short for Secure Socket Layer – which probably doesn’t help you much in understanding what it does beyond the word secure. SSL certificates are used on the web to encrypt traffic between a server and the person who requested the content. When someone visits your site, your server creates a SSL handshake between it and your computer to enable this encrypted communication.

DNS lookups and SSL handshakes require time to complete before your browser even begins to receive data back. The more domains a browser has to look up when your website loads, the more DNS lookups and SSL handshakes required before the data even loads from those servers.

HTTP/2 is important to understand as part of this discussion. You’ve likely heard of HTTP and even HTTPS but unless you’re a more technical minded person you’ve possibly never seen HTTP/2 mentioned. Without getting into a long discussion on it, I’ll simply explain what it does for you.

HTTP/2 is a revision of HTTP that allows your browser to create a single connection with a server and download multiple files from it without having to create a new connection. Instead of a browser needing to create a new connection with a server for each item it needs from it, instead it will create a single connection and get everything it needs.

Since your site’s already going to have a connection to your visitor, HTTP/2 will load your self hosted font files without having to wait while the browser queries DNS and creates a handshake.

A Super Simple Demonstration

I created two copies of the same extremely basic HTML/CSS page to illustrate that there’s a measurable difference in loading time between self hosted vs Google hosted fonts. The pages contain zero images, zero Javascript, zero anything that might possibly affect the loading speed. All CSS has been added to the HTML inline with the exception of the call to the external Google Fonts CSS required to load the fonts. This external call has made use of preloading.

Results shown are the best times of 3 test runs.

Let’s start with the Google hosted results. You can see on line 4 of the waterfall graph – where the 2nd of the two fonts used in the demo page loads – that the completion time for the font load is at the very end of the graph – around 0.52 seconds. Also notice how on line 2 that the CSS call required to load the font creates a render block. Anyone who’s spent any time looking at un-optimized Google Page Speed Insights results will have come across that term before.

Google Hosted Fonts - Waterfall Graph
Google Hosted Fonts – Waterfall Graph

Let’s compare that now with the self hosted version of the same page. First, notice that the lack of the extra CSS call to Google’s servers means we have one item to load and that there’s zero render blocking. The 2nd of the two fonts completes loading right at the 0.34 second mark – a 0.18 second improvement vs the Google hosted version.

Self Hosted Fonts - Waterfall Graph
Self Hosted Fonts – Waterfall Graph

You can visit these pages and test them for yourself if you’d like – Google Hosted Version / Self Hosted Version – while there will be run-to-run test variance, you’ll find overall that the self hosted version is regularly faster.

Putting It All Together

I started this post with some general advice to not rely on third party servers wherever you can. Consider that every third party domain will require a DNS lookup and SSL handshake in order for the page to load. The more domains required for your site to load, the more latency your visitors will experience. Anything you can do to reduce the number of domains and servers that need to be contacted when your site loads – such as self hosting your web fonts – will improve your website’s performance.

If you’ve setup sensible caching, your returning visitors will experience even better loading times thanks to the fonts already being in their browser cache instead of Google’s less than optimal caching situation.

Lastly, if you self host your fonts you’ll never be worried about your site looking odd in the event that Google experiences some kind of server outage.

If you’d like to know HOW exactly you can self host your fonts, check out my article on How To Optimize Your Website With Self Hosted Fonts.

If you found this article helpful or have any questions, I encourage you to please share this article with others and/or leave a comment below. Additionally, you can find me on Twitter at @TechAddressed. Thanks for reading and I hope you visit again soon!

pinterestPinterestlinkedinLinkedInredditReddit

Leave a Comment

Your email address will not be published.