<p>November 30, 2020 </p> <p>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!<br /> This convenience has its price: Performance. Many have already pointed out 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.<br /> This is nothing new. In fact it’s been advocated already since years. Even Google themselves advised others to self-host fonts in their Google I/O ‘18 talk about web performance.<br /> Self-hosting fonts vs Google Fonts<br /> By nature Google Fonts, even with all its font and CSS optimisations, can’t be faster than self-hosted fonts.<br /> Sia wrote a great post where she compared the performance between Google Fonts and self-hosted fonts without the impact of a CDN. </p> <p> Optimised Google Fonts loading with preconnect </p> <p> Optimised self-hosting fonts with preload </p> <p>The old performance argument<br /> 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?<br /> 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. </p> <p>“[…] 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.”<br /> — https://fonts.google.com/about </p> <p>Invalidating the old performance argument </p> <p>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). </p> <p>In this Google post they explain what the partitioned browser cache is. It got only introduced to prevent a possible cross-site tracking mechanism.<br /> Cache partitioning in other browsers<br /> Safari really cares about privacy. It circumvented this very cross-site tracking attack since years already. Then finally comes Chrome. Other browsers that are based off Chromium, still need to signal or implement the feature. </p> <p>✅ Chrome: since v86 (October 2020)<br /> ✅ Safari: since 2013<br /> 🚫 Firefox: planning to implement<br /> 🚫 Edge: most likely soon<br /> 🚫 Opera: most likely soon<br /> 🚫 Brave: most likely soon<br /> 🚫 Vivaldi: most likely soon </p> <p>Conclusion<br /> 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.<br /> Thanks for checking this post out! </p> <p> Simon Wicki is a Freelance Frontend Developer in<br /> Berlin. Passionate and fluent in Vue, Angular, React and Ionic. Interested in<br /> Tech, frontend &#038; non-fiction books </p> <p> Follow @zwacky </p> <p> Let&#8217;s block ads! (Why?)</p>