Optimizing font loading

Jan 04, 2021 · 254 words

• blog
• dev

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.

Font-display swap, block, fallback, optional

Another detailed article on font loading from Nick Bull explain different strategy on font-display usage. I decide to go fallback.

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.