← Back to release summary

@font-face descriptors to override font metrics

Category
CSS
Type
New or changed feature
Status
Enabled by default (Chrome 87)
Intent stage
Shipped

Summary

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

Standards & signals

Docs: https://bit.ly/39qATQ4

Explainers: https://gist.github.com/xiaochengh/da1fa52648d6184fd8022d7134c168c1

View on chromestatus.com