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.

  1. screenshot of Priority Hints and optimizing LCP

    Kevin Farrugia

    Priority Hints and optimizing LCP

    Increasing the priority of a resource usually comes at the cost of another resource, so Priority Hints should be used sparingly. However, if the browser is queuing your LCP image, I recommend you experiment with Priority Hints to see if you can reduce this waiting time and improve your LCP.

  2. Of course we don't work on performance improvements only for Google, but the Search Console is our clients' main concern, so when it shows such a graph, it's satisfying for everyone! 🎉

    Screenshot of a graph from the Google Search Console showing a great improvement of Core Web Vitals