@font-face descriptors to override font metrics

Introduces new @font-face descriptors ascent-override, descent-override and line-gap-override to override metrics of the font. This allows web authors to (i) achieve interoperable text layout across browsers and platforms, and (ii) reduce layout shifting caused by web fonts.

Motivation

1. Improve interoperably across browsers and operating systems, so that the same font always looks the same on the same site, regardless of OS or browser. See [1] 2. Align metrics between two web fonts present simultaneously, but for different glyphs. This use case example comes from the crostini terminal [2] 3. Override font metrics for a fallback font to emulate a web font, in order to minimize Cumulative Layout Shift. [1] https://github.com/w3c/csswg-drafts/issues/4792 [2] https://groups.google.com/a/chromium.org/g/blink-dev/c/mmXMwbmBc5g/m/LAxjFsJPAgAJ

Documentation

Specification

Public discussion

Status in Chromium

Blink>CSS


Enabled by default (tracking bug) in:

  • Chrome for desktop release 87
  • Chrome for Android release 87
  • Android WebView release 87

Consensus & Standardization

After a feature ships in Chrome, the values listed here are not guaranteed to be up to date.

Owner

Intent to Prototype url

Intent to Prototype thread

Search tags

css, font, fonts, css-fonts, font-face, font metrics, override,

Last updated on 2020-10-28