Self-host your fonts for better performance


November 30, 2020

Google Fonts

I’ve ancient Google Fonts in prototypes and in 10M+ MAU merchandise. It’s extremely straightforward to begin up with and offers an tremendous font discovery. That’s moreover why it’s currently aloof ancient on over 42M internet sites!

This comfort has its tag: Efficiency. Many contain already identified the rate of a pair of requests. Within the event you make a selection to contain the final elope enhance, then you positively’re most productive off downloading your ancient Google Fonts and self-host them.

Right here is nothing new. Essentially it’s been advocated already since years. Even Google themselves informed others to self-host fonts in their Google I/O ‘18 discuss internet performance.

Self-internet hosting fonts vs Google Fonts

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

Sia wrote a gigantic put up the put she when compared the performance between Google Fonts and self-hosted fonts with out the impact of a CDN.

Network flow with Google Fonts

Optimised Google Fonts loading with preconnect

Network flow with self-hosting fonts

Optimised self-internet hosting fonts with preload


The extinct performance argument

So if the bottom-line performance is in self-internet hosting fonts’ favour: What used to be the argument that contented us builders that Google Fonts is no longer any lower than as performing because the self-host draw?

Google Fonts used to be designed to be disbursed on a world CDN and reap the caching advantages from it. Users put a question to fonts via stated CDN. Probability is that they’ve downloaded the font sources at an earlier level already from a barely about a collection.

“[…] Our tainted-set caching is designed in declare that you just most productive must load a font once, with any internet set, and we’ll utilize that identical cached font on any barely about a internet set that uses Google Fonts.”

— https://fonts.google.com/about

Invalidating the extinct performance argument

Since Chrome v86, launched October 2020, tainted-set sources fancy fonts can’t be shared on the identical CDN anymore. Right here is on legend of the partitioned browser cache (Safari has had this for years already).

In this Google put up they issue what the partitioned browser cache is. It got most productive launched to shut a possible tainted-set tracking mechanism.

Cache partitioning in barely about a browsers

Safari with out a doubt cares about privateness. It circumvented this very tainted-set tracking attack since years already. Then sooner or later comes Chrome. Other browsers which shall be primarily primarily based mostly off Chromium, aloof must signal or put in power the feature.

  • Chrome: since v86 (October 2020)
  • Safari: since 2013
  • 🚫 Firefox: planning to put in power
  • 🚫 Edge: likely soon
  • 🚫 Opera: likely soon
  • 🚫 Dauntless: likely soon
  • 🚫 Vivaldi: likely soon

Conclusion

Google Fonts sources shall be redownloaded for every and every internet set, regardless it being cached on the CDN. Self-host your fonts for higher performance. The extinct performance argument is no longer legitimate anymore.

Thanks for checking this put up out!


Simon Wicki

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


Twitter
Follow @zwacky

Read More

Recent Content