← Back to release summary

Auto range support for font descriptors inside @font-face rule

Category

CSS

Type

Chromium catches up

Status

Enabled by default (Chrome 109)

Intent stage

Start prototyping

Summary

Auto range support for variable fonts in 'font-weight', 'font-style' and 'font-stretch' descriptors inside '@font-face' rule.

Motivation

Variable fonts provide users the opportunity to choose how heavy or slanted or wide the typeface should be, rather than having those decided by the type designer. For variable fonts, in Chrome, it is required to add the supported range for 'font-weight', 'font-style' and 'font-stretch' descriptors inside @font-face rule, otherwise variable fonts would either be synthesizing bold faces or the text will appear as normal. In CSS WG issue #2485 it was resolved to add a default keyword 'auto'.

Standards & signals

• Specification: https://drafts.csswg.org/css-fonts/#font-prop-desc
• Firefox: Shipped/Shipping — Variable fonts work without specifying the supported range, however the browser does not yet support auto value parsing. Tests for 'font-stretch' and 'font-weight' descriptors are passing. Although the 'font-style' descriptor has a bug when it is synthetically obliqueing out of the supported range.
• Safari: Shipped/Shipping — Variable fonts work without specifying the supported range, however the browser does not yet support auto value parsing. Tests for 'font-stretch' descriptors are passing. Although the 'font-weight' descriptor works without specifying the range, there are some pixel differences in the test results. 'font-style' descriptor looks like it is synthesizing oblique faces.
• Web developers: Positive — UX engineer, Connie Ye (connieye@google.com) faced this issue when she wasn’t able to use font-weight property without specifying the supported range for the variable font. That’s what she said: “It would be useful if the variable fonts behavior was always consistent with normal fonts, where you don't need to declare font-weight within @font-face”
• Tracking bug: https://bugs.chromium.org/p/chromium/issues/detail?id=973194

Explainers: https://bugs.chromium.org/p/chromium/issues/detail?id=973194 https://drafts.csswg.org/css-fonts/#font-prop-desc

View on chromestatus.com