Simon Hearne avatar Simon Hearne

How to avoid layout shifts caused by web fonts

Screenshot of “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.

7 Webmentions

5 likes

1 repost

  1. webperfbot avatar

1 reply

  1. Simon Hearne avatar Simon Hearne
    1s is a pretty slow load time, I like to see 0.7s 😀