[T]he
line-gap-override
,ascent-override
anddescent-override
CSS properties […] allow developers more control over how fonts are displayed. The following snippet shows just how useful these properties are when using a local fallback font:
Code language: CSS
@font-face {
font-family: web-font;
src: url("<https://example.com/font.woff>");
}
@font-face {
font-family: local-font;
src: local(Local Font);
ascent-override: 90%;
descent-override: 110%;
line-gap-override: 120%;
}
These […] properties help to reduce layout shift when fonts are loading, as developers can better match the intricacies of a local font with a web font. They work alongside the
size-adjust
property[.]