Leverage @font-face descriptors like size-adjust, ascent-override, descent-override, and line-gap-override to precisely match your web font's metrics with its fallback. This prevents jarring Cumulative Layout Shifts (CLS) when web fonts load, significantly improving user experience and perceived performance by maintaining consistent visual spacing and text alignment.
@font-face {
font-family: 'MyCustomFont';
src: url('mycustomfont.woff2') format('woff2');
font-display: swap; /* Use a display strategy that fits your needs */
/* Tune these values to align with your fallback font's metrics */
/* Example values; precise values require font analysis */
size-adjust: 105%; /* Adjusts the overall font size to match fallback */
ascent-override: 95%; /* Adjusts the ascender height of the font */
descent-override: 25%; /* Adjusts the descender height of the font */
line-gap-override: 10%; /* Adjusts the line gap (leading) of the font */
}
body {
font-family: 'MyCustomFont', serif; /* Ensure a suitable fallback */
font-size: 1rem;
line-height: 1.5;
}