Table of Contents

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

  • Google is clever about how it serves fonts to each user. It doesn’t deliver the same CSS to everyone, but decides what stylesheet to serve based on the user’s device, browser, and various other factors. For example, it’ll serve fonts with resource-heavy features such as WOFF, Kerning, and Hints only to those user agents that support them. In all other cases, it’ll use the superior WOFF 2.0 compression standard. This can help reduce the size of fonts delivered, making them load much faster.  
  • Google Font API script downloads fonts on a per page basis based on multiple factors, even if the page header includes it. If a web page doesn’t use the fonts specified, Google Fonts won’t load it. If you’re hosting fonts locally, it’ll be hard to enable this functionality.  
  • While reducing the number of HTTP requests is a great way to speed up your website’s performance in most cases, the above test results suggest that it isn’t the case with Google Fonts. The actual load time of your website will suffer if you host Google Fonts locally.
  • Google uses the best-in-class web performance technologies to serve fonts. Even if you know little about web fonts and how to use them, Google Fonts make it super easy to implement them on your website with no significant performance loss. 
  • When a new web fonts technology arrives (e.g. variable fonts, progressive font enrichment, better compression), Google Fonts API will bring it immediately to millions of websites. You don’t have to do much to enable it.  

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. 


Comments (10)

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.

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!!

I've been recently experimenting with hosting fonts locally, did a few tests and the difference was significant. Serving only the fonts I really need, from my own CDN and having them preloaded helped me save 0.4 sec on average and reduce 6 HTTP requests.

As speed test nearly match up… You would also need to consider that some people don't want the "tracking" part that is indirectly linked to any page using Google Fonts. If you ever had your doubts about the Facebook Like and plugins tracking user across pages… Google Fonts is right up there.

please consider that you should not use google webfonts served by google if you are within the EU!
because if you use the google cdn you must offer a consent form first before even loading the fonts. (which makes it impossible the load the site)
so hosting them locally is your (only) option!
all the best
alexander

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/

PS: On the down low, webpagespeedtest.org is funded by Google, also. If source credibility matters then check the money sources. That's the test speed professionals prefer.

Performance is one side. But dont forget that its recommended to host webfonts locally due to GDPR in the European Union.

Latest Articles of Page speed and caching
Subscribe to Our Newsletter

Stay in the loop with the latest WordPress and web performance updates.
Straight to your inbox every two weeks.

Get a Faster Website
in a Few Clicks

Setup Takes 3 Minutes Flat
Get WP Rocket Now