Self-Hosting Google Fonts

Google Fonts are one of the most widely used third-party resources in many websites. They make it easy for websites to unify and present their content better. With over 999 free and unique font families to choose from, users have collectively viewed Google Fonts over 40 trillion times (July 2020). 

Externally hosted fonts like Google Fonts are also one of the heaviest third-party resources to load. Not only do they add to the page weight, but websites have to make additional HTTP requests to fetch them. The performance hit is even more prominent when you load multiple font families with multiple font weights. 

Thus, it seems like a great idea to host Google Fonts locally and serve them from your server, as opposed to loading them from Google’s CDN. Theoretically, it could make your websites load faster. But it turns out that fonts are peculiarly complex, and self-hosting them may make optimizing your website’s performance a little trickier.

In this article, you’ll learn the basics of web fonts, including Google Fonts, and how you can host them locally. You’ll then find out whether it makes a difference to a website’s performance.

Excited? Let’s begin.

What are Web Fonts?

Web fonts refer to fonts that you can use to display text websites. They’re a collection of glyphs, wherein each glyph is a vector that shows a letter, number, or a symbol. 

In the early days of the web, developers had limited web fonts to choose from. Major operating systems came bundled with these fonts (e.g. Arial, Georgia, Times New Roman). Thus, they’re also known as web-safe fonts.

A diagram of popular web-safe fonts
A diagram of popular web-safe fonts (Source: CoffeeCup Software)

CSS3 introduced the @font-face rule that allowed web developers to use custom fonts. Specifying them forces the browser to download them along with other website resources. This feature opened up new exciting ways to design websites. The web was no longer a collection of boring text.

Some of the most popular web fonts in use today are Open Sans, Roboto, and Lato. These are also Google Fonts. You can learn more about web fonts in WP Rocket’s web font optimization guide.

There’s a Google Font for almost every use
There’s a Google Font for almost every use (Source: Google)

What are Google Fonts?

Google Fonts are a massive catalog of free, open source fonts. They make it easy for web designers and developers to create beautiful websites with great typography. As of now, Google Fonts include web fonts for over 135 languages. 

Google Fonts are used by 10+ million websites
Google Fonts are used by 10+ million websites (Source: SimilarTech)

Google Fonts not only takes care of the licensing requirements for all the web fonts it hosts, but it also handles their hosting and delivery. You can even consider it as a CDN for fonts. Hence, everyone can take advantage of them anytime they want by adding a single line in their website’s page headers.

Google Fonts and Website Performance

Google Fonts claims to make web pages load faster by caching fonts across various sites so that each font loads only once for all websites. The browser can use the same cached font for any other website that requests the same Google Font.

It also detects a user’s browser and sends them the smallest font file based on the latest technologies their browser supports. For example, it serves users fonts with WOFF 2.0 format whenever applicable as it has superior compression compared to other web font formats. 

However, when you use Google Fonts on your website, the website’s main stylesheet sends an HTTP request to fetch the Google Fonts stylesheet (a CSS file). The client sends this request to the fonts.googleapis.com domain. Typically, one request is generated for every font you use.  

The Google Fonts stylesheet makes another request to download the font file (e.g. a WOFF or WOFF 2.0 file). The stylesheet directs these requests to the fonts.gstatic.com domain where all the Google Fonts are hosted. 

Making extra HTTP requests on your websites takes time. You can confirm that by checking the waterfall chart generated by the WebPageTest tool. 

Using Google Fonts adds at least two additional HTTP requests
Using Google Fonts adds at least two additional HTTP requests

Google Fonts API sets a low expiration time of 1 day for caching fonts. You cannot modify this as Google generates the CSS file automatically based on multiple factors.

Some website speed testing tools point this out as a performance issue and suggest hosting fonts locally. This way you can increase the expiration time of fonts manually and cache them for a longer time. The below section covers how you can do exactly that on your WordPress site. 

How to Serve Google Fonts from Your Server

The simplest way to self-host Google Fonts locally on your WordPress site is with the free OMGF WordPress plugin. It uses the Google Fonts Helper API to download fonts to your webserver. After that, OMGF generates a stylesheet for the downloaded fonts and adds it to your site’s header. 

The OMGF WordPress plugin
The OMGF WordPress plugin

It’s easy to search for any Google Font family you want with OMFG. You can also click the Auto Detect button to let it analyze which Google Fonts are being used on your website. 

The OMGF admin dashboard
The OMGF admin dashboard

Once you’ve settled on a particular font family, you can specify which font subsets and styles you want to download. This can help you reduce the size of the fonts being served significantly. 

Serving Google Fonts locally should decrease pageload times by minimizing DNS requests and leveraging browser cache. But does this assumption really hold true? 

Website Performance Test with Self-Hosted Google Fonts

The WP Rocket dev team set up a dummy website which used Google Fonts. The first test site used just one font family. They then ran a few performance tests with it, both with the WP Rocket plugin enabled and disabled. 

Then they modified the website to serve Google Fonts locally and tested it again. As with before, they performed the tests separately with the WP Rocket plugin enabled and disabled.  
Note: GTMetrix was used to conduct this website performance test. The website used WP Rocket 3.6-alpha3 build version with Optimize Google Fonts and Optimize CSS Delivery settings enabled. OMGF WordPress plugin was used to self-host the Google Fonts.

Results for serving Google Fonts from Google CDN vs hosting them locally
Results for serving Google Fonts from Google CDN vs hosting them locally

The speed test results suggest that hosting Google Fonts locally don’t give any specific performance benefits. They look almost identical. 

To confirm this theory, they added many more fonts to the website before testing it again. The results below paint a more clear picture.

Repeat of the above speed test with many more fonts added
Repeat of the above speed test with many more fonts added

With WP Rocket enabled, serving fonts directly from Google CDN turned out to be the fastest option. Otherwise, there’s no specific performance benefits seen here like before.

Below are some screens from the speed test reports performed above. Note the loading time for fonts between the various tests. 

Google Fonts served from Google CDN with WP Rocket enabled
Google Fonts served from Google CDN with WP Rocket enabled

In the test here, the modules.tff font file serves as a control group. It’s hosted on the same server as the test website in both the cases.

Google Fonts hosted locally with WP Rocket enabled
Google Fonts hosted locally with WP Rocket enabled

The results show that Google Fonts load significantly faster from Google CDN. Even the locally hosted modules.tff font loads faster in the first case as compared to the second one.  

Adding many Google Fonts only exacerbates the performance further.

Google Fonts served from Google CDN
Google Fonts served from Google CDN
Fonts hosted locally
Fonts hosted locally

Even with the additional HTTP requests added by Google Fonts, they load much faster from Google CDN than when they’re hosted locally. So, what can explain this anomaly? The below section provides a brief explanation. 

Why Google Fonts is Better

Summary

Self-hosting fonts seems like a good way to speed up your website. But as we discovered above, Google Fonts is not just a vast repository of free fonts, it’s also a smart way to deliver them with the latest web performance techniques.  

You learnt that self-hosting web fonts is a bit more complex than just downloading and hosting them. Optimizing their delivery by yourself isn’t that simple, unless you have the know-how and technical skills to implement it perfectly. Thankfully, Google Fonts handles all of it for you. 

Ultimately, the more fonts (and subtypes) you use on your website, the longer it’ll take to load. WP Rocket includes the Optimize Google Fonts option to improve font performance without hosting fonts locally. 

I hope this post convinced you why it’s not recommended self-hosting Google Fonts in most cases. 

Still having trouble with Google Fonts and optimizing them? If you have questions or suggestions, leave a comment below. 

Author's avatar

Salman Ravoof is a self-taught web developer, writer, and creator. He’s a huge fan of Free and Open-Source Software. Apart from tech, he finds science, philosophy, and food exciting. Learn more about him on his website, and connect with Salman on Twitter.

5 comments

Going to ignore the results because of the fact you used webpagespeedtest and not Pagespeed Insights and core web vitals.

Visitors to your website do not care how long it took for images at the bottom of the page to load, as long as it loads before they scroll down there. How long does it take for the page to render on my phone, and allow me to interact with it and start scrolling? That is what you need to test.

    I agree that a more comprehensive speed testing should be done to assess the actual performance of the site.

    However, the focus here wasn't to test the website performance perfectly, but compare how fast Google Fonts load when they're served from your own server versus Google CDN. Turns out, Google CDN is faster even with the additional HTTP requests. The potential reasons for this are given in the article.

This test´s results are irrelevant. I´ve performed dozens and dozens of page speed optimization mostly on WordPress-based sites and I´ve seen over and over again improvements on my client site´s performance when hosting fonts locally. Especially, when also serving them through a CDN.

This feels like an attempt to show off your product. Which, by the way, I don´t think it needs these not so subtle marketing efforts to promote. It´s already pretty awesome.

I am going to leave here an article from an expert on this matter...

https://csswizardry.com/2019/05/self-host-your-static-assets/

Cheers!!

    Every website and server setup is different, so I wouldn't dismiss the test results here based on anecdotal evidence for some other criteria. The focus here was testing font load times when serving Google Fonts locally vs. loading them from Google CDN. That was the only test criteria.

    If you're using a CDN to serve fonts and all other static assets, that's another matter. I'll recommend every website owner to use a CDN too for hosting static assets. But fonts are an anomaly here as they're complex. You need to take care of resource hints, subsetting, and swap property so that it works properly on all OS/browsers efficiently. If you're not implementing all of them perfectly, you'll be harming your site's performance instead. Here's a more detailed article on the same: https://www.tunetheweb.com/blog/should-you-self-host-google-fonts/

    The attempt here wasn't to show off WP Rocket. I'm a freelance tech writer. I'm not affiliated with WP Rocket in any way other than them being my client. I try to be as unbiased as possible. The reason why this article was written is because some WP Rocket users have requested to include a feature within WP Rocket to let them host fonts locally. WP Rocket's dev team tested this feature extensively and decided against it. That's pretty much it.

Locally hosting your web fonts you can set the edge caching expires and have those served using your CDN of choice. If you are using the Google web fonts than you can also set that external request to be DNS prefetched. You can get even more gains if using Cloudflare with Cloudflare workers.
https://blog.cloudflare.com/fast-google-fonts-with-cloudflare-workers/

Add a comment
Your email address will not be published. All fields are required. Comment policy: We love comments and appreciate the time that readers spend to shader ideas and give feedback. However, all comments are manually moderated and those deemed to be spam or solely promotional will be deleted.

Get a Faster Website in a Few Clicks

Setup Takes 3 Minutes Flat

Get WP Rocket Now What are you waiting for?

{"cart_token":"","hash":"","cart_data":""}