DEV Community

loading...
Cover image for Time to Say Goodbye to Google Fonts

Time to Say Goodbye to Google Fonts

zwacky profile image Simon Wicki Originally published at wicki.io Updated on ・3 min read

I've used Google Fonts in prototypes and in 10M+ MAU products. It's incredibly easy to get started with and provides an amazing font discovery. That's also why it's currently still used on over 42M websites!

This convenience has its price: Performance. Many have already pointed out in great detail the cost of multiple requests. If you want the remaining speed boost, then you're best off downloading your used Google Fonts and self-host them.

This is nothing new. In fact it's been advocated already for years. Even Google themselves advised others to self-host fonts in their Google I/O '18 talk about web performance.


Self-hosting fonts vs Google Fonts

By nature Google Fonts, even with all its font and CSS optimisations, can’t be faster than self-hosted fonts.

Sia wrote a great post where she compared the performance between Google Fonts and self-hosted fonts without the impact of a CDN.

Optimised self-hosting fonts with preload:
Optimised Google Fonts loading with preconnect

Optimised self-hosting fonts with preload:
Optimised self-hosting fonts with preload


The old performance argument

So if the bottom-line performance is in self-hosting fonts’ favour: What was the argument that convinced us developers that Google Fonts is at least as performing as the self-host approach?

Google Fonts was designed to be distributed on a global CDN and reap the caching benefits from it. Users request fonts via said CDN. Chances are that they have downloaded the font resources at an earlier point already from a different site.

"[…] Our cross-site caching is designed so that you only need to load a font once, with any website, and we'll use that same cached font on any other website that uses Google Fonts."

Invalidating the old performance argument

Since Chrome v86, released October 2020, cross-site resources like fonts can't be shared on the same CDN anymore. This is due to the partitioned browser cache (Safari has had this for years already).

In this Google post they explain what the partitioned browser cache is. It got only introduced to prevent a possible cross-site tracking mechanism.

Cache partitioning in other browsers

Safari really cares about privacy. It circumvented this very cross-site tracking attack for years already. Then finally comes Chrome. Other browsers that are based off Chromium, still need to signal or implement the feature.

Chrome: since v86 (October 2020)
Safari: since 2013
🚫 Firefox: planning to implement
🚫 Edge: most likely soon
🚫 Opera: most likely soon
🚫 Brave: most likely soon
🚫 Vivaldi: most likely soon

Conclusion

Google Fonts resources will be redownloaded for every website, regardless it being cached on the CDN. Self-host your fonts for better performance. The old performance argument is not valid anymore.

Thanks for checking this post out!


Simon Wicki is a Frontend Developer in Berlin. Passionate and fluent in Vue, Angular, React and Ionic. Interested in Tech, frontend & non-fiction books.

👉 Join me on Twitter to follow my latest updates.

Discussion

pic
Editor guide
Collapse
yellow1912 profile image
yellow1912

So you still use google font, you only download them to your server right? What is the performance benefit here? Even the article you pointed to concluded that hosting google font locally does not yield any benefit. I can even argue that google connection can be faster than your own server in some cases.

The only thing that you can save is dns connect time which can be helped partially with preconnect. As stated in the article you linked yourself, google also has some nice tweaks built in on their server to detect and serve fonts better for users. Wouldn't it be way more complicated to do it yourself?

Collapse
zwacky profile image
Simon Wicki Author

Hey yellow, I now updated the post. Thanks again and sorry for the confusion.

Collapse
zwacky profile image
Simon Wicki Author

Hey yellow, I apologise I messed up the links 🙈. I still had it in my research list of not "enough data to back it up". Thanks for pointing this out, I will update it immediately!

Collapse
yellow1912 profile image
yellow1912

Thank you. I'm very interested in all these performance topics. Do you see real improvement hosting your own fonts? Do you measure impacts with users using various browsers and devices?

On this article in your post, the wp rocket team seems to dismiss the idea that local fonts are faster. wp-rocket.me/blog/self-hosting-goo...

Thread Thread
zwacky profile image
Simon Wicki Author

I'm very interested in these topics as well!

In the wp-rocket blog post, all replies disagree with the author in the comment section. The author also compares Google Fonts with CDN to self hosted fonts for repeated usage, which is comparing apples with pears.
Adding a CDN for your static assets like self-hosted fonts improves performance, definitely. Therefore I wouldn't compare this.

The benchmark data on the wp-rocket blog post never made any sense to me either: in one network chart I can clearly see that self-hosted fonts is being requested faster than the Google Fonts network chart. But the document-ready signal is later initiated, which could mean that their implementation of self-hosted fonts are blocking the render, whereas the Google Fonts use font-display swap.
You see, so many assumptions and questions that I rather not trust that data.

Sorry again for bringing that link into the conversation.

I guess I'd better follow up with a clean benchmark post myself! :)

Collapse
gsarig profile image
Giorgos Sarigiannidis

Self-hosting fonts isn't recommended for performance reasons only, but also because it is better in regards to privacy and GDPR compliance.

BTW, recently, WordPress announced the Webfonts Loader project, which will eventually get its way to the core.

Collapse
zwacky profile image
Simon Wicki Author

Thank you Giorgos for pointing this out, I fully agree. I'm glad to see WordPress going in this direction!

Collapse
stu profile image
Stu Finn

Great post, thanks!

One of the plugins I use to load web fonts in my Gatsby sites is no longer being maintained, and recently caused all my clients' websites to stop building properly. Will be moving them all over to self-hosted fonts ASAP.

Collapse
amn3s1a2018 profile image
Amn3s1a2018

There are an another cons with the self hosting approach. The total resource cost is more, if we're hosting the same content as someone else. (Well CDNs do this too, but that's their job)
The "global-font-bandwidth" (environmental footprint) is bigger because of the new caching policies, but same in the self hosted and in google hosted scenario (or smaller until every browser has the feature). You have to update the self hosted data regularly if something you need fixed or added in them.
And I don't see any pros. As already discussed, the UX benefits are questionable (if they exist at all). Well, thank you anyway.

Collapse
hb profile image
Henry Boisdequin

Okay! I've stopped using Google Fonts.

Collapse
pahund profile image
Patrick Hund

Nice, thanks for the info, I wasn't aware!

Collapse
madza profile image
Madza

Useful information, thanks! 🙏❤

Collapse
fal profile image
Gabriele Falace

Very insightful, thanks!