Impact of Web Fonts on Cumulative Layout Shift and Corrective Measures
CLS or Cumulative Layout Shift, which is a measurement metric for page visual stability, is also a search engine ranking factor.
Your selected web font may negatively impact CLS. This irritant visual shift occurs when your primary font takes either more space or less page space than fallback font, while swapping. → Watch Video Tutorial below.
To tackle this issue, you should carefully select list of matching fallback fonts for your primary font. An article on Google Developers site, puts it in these words:
“The culprit might be an image or video with unknown dimensions, a font that renders larger or smaller than its fallback, or a third-party ad or widget that dynamically resizes itself.”
In case, font is the culprit, you can effectively reduce CLS in following ways.
Optimize your web font, through compression and subsetting, so that your web font should load fast, eliminating the need for font swapping
You can modify the rendering behavior of fonts by selecting ‘Optional’ in CSS of font-display property. Do not select auto, swap, block and fallback options as they cause FOUT or FOIT layout shift on the page. According to CSS Working Group document: “An ‘optional’ font must never cause the layout of the page to "jump" as it loads in.”
Choose a fast font server such as Google Fonts API so that browser can download font files in optimal time. Cross-site caching capability of Google Fonts also plays great role in eradicating CLS issue
Use <link rel=preload> so that your primary font files download earlier than other assets
Use Preconnect for third party font hosts such as Google Fonts
Select fallback font which closely matches with your primary web font. [RD]
