Skip to content

Instantly share code, notes, and snippets.

Last active December 14, 2022 09:21
What would you like to do?
Explainer: Font Metrics Override Descriptors

Explainer: Font Metrics Override Descriptors

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


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):

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("");

@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="" 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment