You have a beautiful design utilizing a premium geometric sans-serif font. The user visits the site, begins reading a paragraph, and suddenly the text flashes, changes shape, and pushes the button they were about to click down by 40 pixels.
This is a Cumulative Layout Shift (CLS) violation, and web fonts are the primary culprit.
The FOUT vs FOIT Dilemma
When a browser encounters a custom font definition, it must download the font file before it can render the text using it. Browsers handle this delay in two ways:
- FOIT (Flash of Invisible Text): The browser hides the text until the custom font loads. This is terrible for UX on slow connections.
- FOUT (Flash of Unstyled Text): The browser renders the text in a system fallback font (like Arial), and then swaps to the custom font once downloaded.
FOUT is much better for user experience, but it causes CLS. Because Arial and your custom font have different widths and x-heights, the text reflows and shifts the page content when the swap occurs.
Step 1: Preload the Critical Font
To minimize the swap time, tell the browser to fetch the font file immediately, before it even parses the CSS. Add this to your HTML <head>:
<link rel="preload" href="/fonts/my-font.woff2" as="font" type="font/woff2" crossorigin>*Note: Only preload the exact weights (usually 400 and 700) used above the fold. Preloading 8 font weights will throttle the network.*
Step 2: Use Font-Display: Swap
In your @font-face declaration, ensure you use font-display: swap;. This forces the FOUT behavior, ensuring your text is readable immediately on slow connections.
Step 3: Size-Adjust (The Magic Bullet)
In 2026, the ultimate solution to font-related CLS is the CSS size-adjust descriptor. This allows you to mathematically scale the fallback system font to perfectly match the dimensions of your custom font, eliminating the layout shift when the swap happens.
@font-face {
font-family: "Fallback-Match";
src: local("Arial");
size-adjust: 98.5%;
ascent-override: 95%;
descent-override: 20%;
}
body {
font-family: "CustomPremiumFont", "Fallback-Match", sans-serif;
}Tools like the Next.js next/font module handle this complex math automatically, generating perfect fallback wrappers. If you are building custom sites, mastering font-loading is essential for passing Core Web Vitals.
Web fonts look great, but they are notorious for causing Cumulative Layout Shift (CLS). Learn how to preload fonts and use font-display to stabilize your layouts.
- Abdullah Sajid
Leave a comment