How to avoid layout shifts caused by web fonts – Simon Hearne
A terrific in-depth look at improving the performance of web fonts.
Bunny Fonts | Explore Faster & GDPR friendly Fonts
A drop-in replacement for Google Fonts without the tracking …but really, you should be self-hosting your font files.
Related links
eBay’s Font Loading Strategy | eBay Tech Blog
Here’s the flow that eBay use for the font-loading. They’ve decided that on the very first page view, seeing a system font is an acceptable trade-off. I think that makes sense for their situation.
Interestingly, they set a flag for subsequent visits using localStorage rather than a cookie. I wonder why that is? For me, the ability to read cookies on the server as well as the client make them quite handy for situations like this.
Web fonts, boy, I don’t know – Monica Dinculescu
Monica takes a look at the options out there for loading web fonts and settles on a smart asynchronous lazy-loading approach.
The Typekit Blog | Variable fonts, a new kind of font for flexible design
This is what Nick Sherman has been banging on about for years, and now the time has come for variable fonts …as long as typographers, browser makers, and standards bodies get behind it.
More details on Ev’s blog.
A Comprehensive Guide to Font Loading Strategies—zachleat.com
A terrific rundown of all your options when it comes to web font loading.
Related posts
Fluid
Going from delight to default in one straight line.
Making the Patterns Day website
The joy of getting hands-on with HTML and CSS.
More writing on web.dev
Another five articles on modern responsive web design.
Downloading from Google Fonts
For some reason, Google Fonts only provides .ttf files if you’re self-hosting. I don’t know why.
Utopia
Why do I like fluid responsive typography? Let me count the ways…