line-gap-override, ascent-override and descent-override CSS properties

[T]he line-gap-override, ascent-override and descent-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[.]