Simon Hearne How to avoid layout shifts caused by web fonts
https:/
One common cause of layout shift is surprisingly difficult to resolve though: flashes of unstyled text (FOUT).
In this post we will explore the surprisingly complex world of text rendering on the web and some techniques to remove FOUT while not incurring a CLS penalty.
In summary we need to prevent the layout shift by letting the browser render in a fallback system font if it doesn’t get the web font in time, then optimise our fonts to try to get them to the browser before it needs them.
-
older link:
The Devil's Albatross -
newer link:
Legacy and Transition: Creating a New Universal Image Codec
