Optimizing font loading
How to increase performance regarding font loading
Jan 04, 2021 · 254 words
Lot of solutions to choose from
I came accros this great article on css-tricks on how to load font in a way that fight FOUT and makes lighthouse happy. I’m not here to please lighthouse, but what could be improved to speed up this website is welcomed. The solution explained here is to use some JS to wait rendering in order to load the font. But then a fallback is needed to have a non-obstructive solution.
Best build tool is no build tool
Love the idea that, for this sort of website, having a bare simple almost raw website is the best resilient approach. As posted here by Steren My stack will outlive yours. I loved the idea of choosing the lightest solution.
Choose a fallback font
This tool Font-style-matcher helped me find the best system font alternative to avoid my page jumping to much when the font would load.
Another detailed article on font loading from Nick Bull explain different strategy on
I decide to go
font-display: fallback;Acts as a compromise between the auto and swap values. The browser hides the text for about 100ms, and if the font has not yet been downloaded, the browser uses the fallback text. It will swap to the new font after it is downloaded, but only during a short swap period (probably three seconds).
As the font is loaded and cached by the service worker, on the next page, the user will have the font loaded anyway.