more content equals more potential layout shift when font swapsīy putting size-adjust in the rule, it sets a global glyph adjustment for the font face. The problem however, is that sometimes when the web font loads, it shifts the entire page around since it presents at a slightly different box height size. This gives you the best of both worlds: the content is visible as soon as possible, and you get a nicely styled page without sacrificing your user's time to content. Render a quick-loading system font to show the content first, then swap that with a web font when the web font finishes loading. To improve font rendering, a great technique is font swapping.
The example on the left has layout shift, the one on the right does not. This is just a small example with a single headline element and the issue is very noticeable. In the following gif, watch the examples on the left and how there's a shift when the font is changed. Mitigating CLS with seamless font swapping # If the second headline in the above demo is not larger than the first one, your browser does not support size-adjust. Moving interactive target areas (the dropdown jumps around!).Try changing the typeface with the dropdown and observe: Here's an interactive demo of the problem space. One important use case is optimizing web font rendering to prevent cumulative layout shift (CLS). It also demonstrates a few ways to correct and normalize font sizes for smoother user experience, consistent design systems and more predictable page layout. This post explores a new CSS font-face descriptor called size-adjust, available in Chromium 92 and Firefox 89 (behind a flag) (see caniuse for latest support). In this example Chrome DevTools CSS grid layout debug tools are used to show heights. The examples on the right use size-adjust to ensure 64px is the consistent final size. The examples on the left have not been adjusted and have an inconsistent final size. Consider the following demo where the font-size is a consistent 64px, and the only difference between each of these headers is the font-family.