This is pretty good, IMO. The take-home is: use font-loading: optional; in your CSS, and host your fonts yourself (or at least, the CSS for them). The alternative offered if you can’t bear to make your custom fonts optional is to adjust the metrics of your fallback font to match your custom font. This could be ugly, but it probably won’t be, and it prevents a reflow when your custom font finally loads.
Your fonts are always optional, though, no? Because the rendering can’t be enforced by the site. My browser can render it any way I want, and I don’t have to listen to your CSS. So why not make it optional, always? And then get rid of that CSS attribute, and just render and reflow? Because this is all an illusion of control in the first place.
As always, the browser and standards should solve this for us. Developers should not have to type “font-loading:optional;” as boilerplate in every website they make.
It’s always optional, but that means many things to many people. font-loading: optional; has a specific meaning as described in the article: that the CSS author would rather have no custom fonts than custom fonts that block loading or jiggle the layout after a slow load.
Right, but why do we make the CSS author make that decision? Or rather, why do we allow them to? We should ALWAYS do that. Or better, just have browsers implement the throwaway custom font-width matching tool that this author came up with, for everything? Just forcing every web developer to read this document is THOUSANDS of hours of human-hours that could be better spent on other things. For the millions of web developers who won’t read this document, they’ll have fonts that slow the loading of their websites, for what is almost certainly no reason at all.
So, just…don’t? Don’t let this CSS setting exist: Always do the jiggle thing, but minimize it with a width-matched fallback font. Then, everyone is happy, and nobody has had to invest any time into learning any of this.
There’s so, so many of these “One simple trick to not make your website suck” for users and accessibility that should absolutely just be what happens automatically.
If it’s a landing page for a marketing site, the author (or their customers) probably prefer it get better metrics on google by loading faster. If it’s a big interactive experience all on one page load, the custom font is probably important. Letting the authors opt in to the former case seems pretty reasonable.
The browser can’t do the font-width matching because it requires the metrics of the fancy font, which aren’t available before it loads.
In general this stuff can’t be implemented automatically because it’s not universally ideal, or would break the (conflicting, heh) assumptions developers have made over the last 30 years. It’s complicated, but it can also be folded into tools that analyze page speed and provide suggestions, which are in common use.