How to avoid layout shifts caused by web fonts
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.
The Devil's Albatross
Legacy and Transition: Creating a New Universal Image Codec