By Shad Super in Questions —

What Are the Best Practices for Optimizing Mobile Web Fonts to Reduce "CLS Issue: More Than 0.1 (Mobile)" and Improve Layout Stability?

Summary

To optimize mobile web fonts for reducing the "CLS issue: more than 0.1 (mobile)" and improving layout stability, best practices involve preloading the web font files, using modern formats, setting `font-display` to `swap`, and leveraging font subsetting. This ensures minimal layout shift and enhances the Cumulative Layout Shift (CLS) score.

Web Font Preloading

Preloading prompts the browser to fetch the required web font files early in the page loading process. This prevents the loading delay, reduces the FOUT (Flash of Unstyled Text), and stabilizes the layout. You can use the `<link rel="preload">` attribute in the HTML file to preload web font files.

Modern Font Formats

Modern formats like WOFF2 offer better compression than older types like TTF or OTF, shortening the delivery time of the web font files, aiding in faster rendering and improved layout stability.

Font Display Swap

Set the `font-display` CSS property to `swap`, allowing the browser to use a fallback font to display text until the desired web font loads. This practice prevents layout shifts caused by late-loading web fonts.

Font Subsetting

Font subsetting involves removing unused characters from the font file, therefore reducing its size. This can include removing lesser-used symbols, punctuation, or language characters that are not being used on a particular site. Subsetting helps to reduce the font size dramatically, improving the load time and reducing layout shift.

References