The advance-override descriptor scales all character advances of the font face by the given percentage. It can be used to match text width between two fonts, and hence reduce layout shift caused by web font loading.

Motivation

Web font loading is a major cause of layout shifting, because the same text usually has different widths when using fallback font and web font. By using advance-override in the fallback font face, we can match the text width between the two fonts, and hence reduce the layout shift.

Documentation

Specification

Editor's draft

Status in Chromium

Blink>CSS


No longer pursuing (tracking bug)

Consensus & Standardization

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

Owner

Search tags

css, css-fonts, font-face, advance-override,

Last updated on 2021-03-18