Explainer: Font Metrics Override Descriptors

explainer.md

Explainer: Font Metrics Override Descriptors

(A newer version is at here, where a new descriptor advance-override is added)

Spec

This doc explains descriptors ascent-override, descent-override and line-gap-override for CSS @font-face rule.

Basic usage:

@font-face {
  font-family: ...;
  src: ...;
  ascent-override: 80%;
  descent-override: 20%;
  line-gap-override: 0%;
  ...
}

In any element using this font, the ascent, descent and line gap of each line will be set to 80%, 20% and 0%, respectively, of the used font size.

Demos (need Chrome M86+ and --enable-blink-features=CSSFontMetricsOverride flag):

• Latin: https://jsfiddle.net/wpnjav2k/ (screenshot video)
• Devanagari: https://jsfiddle.net/wpnjav2k/1/ (screenshot)
• Arabic: https://jsfiddle.net/mgx5t72s/ (screenshot)

Use case: interoperable text layout

Web authors can override the metrics of a font to ensure the same text layout across browsers and platforms, which could otherwise be a tricky issue.

Use case: reduce layout shifting caused by web fonts

@font-face {
  font-family: cool-web-font;
  src: url("https://example.com/font.woff");
}

@font-face {
  font-family: fallback-to-local;
  src: local(Some Local Font);
  /* Override metric values to match cool-web-font */
  ascent-override: 125%;
  descent-override: 25%;
  line-gap-override: 0%;
}

<div style="font-family: cool-web-font, fallback-to-local">Title goes here</div>
<img src="https://example.com/large-image" alt="A large image that creates a lot of CLS when shifted">

In this way, the image will not be vertically shifted when the browser finishes loading and switches to use the web font.