Google Fonts is easily the most popular and widely used font service out there and for good reason. It’s incredibly easy to get started with and provides an amazing font discovery — currently being used on over 42M websites!
Google-hosted Fonts Hurt Performance
Say what?! What about the global CDN and caching benefits performance argument?
[…] 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.https://fonts.google.com/about
Since Chrome’s v86 release in 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 the reasons behind it, mainly to prevent a possible cross-site tracking mechanism.
This means users no longer get the performance benefit from having already visited a site that’s using a Google Font, then visits another using the same. They’re both still going to have to be load externally, not from local cache.
Self-hosted fonts vs. Google-hosted fonts
No matter what tricks you try to implement, there’s no way around it, even with all of Google Fonts optimizations, it 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.
Google also hosted a talk back in 2018 about web performance and self-hosted web fonts. Check it out below:
Google Fonts resources will be re-downloaded for every website, regardless of it being cached on the CDN. Self-host your fonts for better performance. The old performance argument is not valid anymore.
All comments posted on 'Quit Using Google-hosted Fonts' are held for moderation and only published when on topic and not rude. Get a gold star if you actually read & follow these rules.
You may write comments in Markdown. This is the best way to post any code, inline like `<div>this</div>` or multiline blocks within triple backtick fences (```) with double new lines before and after.
Want to tell me something privately, like pointing out a typo or stuff like that? Contact Me.