How can I fix layout-shift issues caused by font-loading?
Asked on Oct 02, 2025
Answer
To address layout-shift issues caused by font-loading, you can use the "font-display" CSS property to control how fonts are rendered during loading. This helps improve the Cumulative Layout Shift (CLS) metric by ensuring text remains readable and stable.
/* CSS for font-display */
@font-face {
font-family: 'CustomFont';
src: url('customfont.woff2') format('woff2');
font-display: swap;
}Additional Comment:
- Using "font-display: swap" allows the browser to use a fallback font until the custom font is fully loaded, minimizing layout shifts.
- Ensure fallback fonts have similar metrics to custom fonts to reduce noticeable shifts.
- Consider preloading critical fonts using the "link rel='preload'" tag to speed up font loading.
Recommended Links: