Explainer: Font Metrics Override Descriptors

explainer.md

Explainer: Font Metrics Override Descriptors

** Not standardized yet!! **

Spec

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

Usage:

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

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. All characters will be 110% as wide as originally. See more examples in the spec.

Demos (need Chrome M90+ and --enable-blink-features=CSSFontFaceAdvanceOverride flag):

• Latin: https://jsfiddle.net/x57knsd1/ (screenshot video)
• Devanagari: https://jsfiddle.net/f5b9vqc3/ (screenshot)
• Arabic: https://jsfiddle.net/Lzda2598/ (screenshot)

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%;
  advance-override: 109%;
}

<div style="font-family: cool-web-font, fallback-to-local">Title goes here</div>
<img src="https://example.com/largeimage" alt="A large image that you don’t want to shift">

The image will not be shifted as much when the user agent finishes loading and switches to use the web font (assuming the override values are similar to the web font’s natural metrics).

Use case: interoperable text layout

With ascent-override, descent-override and line-gap-override, 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.

---

(An older version of this explainer is at here. This version adds advance-override.)