v140 · miscellaneous

Support font-variation-settings descriptor in @font-face rule

As CSS allows developers to adjust a font’s weight, width, slant, and other axes using the `font-variation-settings` property on individual elements, Chromium-based browsers lack support for this property within `@font-face` declarations.

concepts

  1. @font-face FVS

    Bake font-variation-settings into @font-face. The variation flags apply automatically wherever the family is used.

  2. Font as shipped

    The single-source-of-truth use case: defaults declared once on @font-face, every selector that uses the family inherits them. Side-by-side legacy vs. Chrome 140 CSS.

  3. Preset Builder

    Live slider control over weight, slant, mono, casual axes — with the generated @font-face rule below that bakes the current values in.

  4. Family Variants

    One variable font file, four family names. Each @font-face rule loads the same .woff2 but names it differently and bakes in a different axis set — the typographer's recipe book.

  5. Axis Range Demo

    Five @font-face rules each pinning a different wght axis value (100–900), plus condensed and expanded wdth faces. A specimen shows each face and an axis-value editor generates the exact @font-face rule live. Side-by-side comparison of font-weight interpolation vs font-variation-settings pinning.

why it shipped

Chromium-based browsers do not currently support font-variation-settings property within @font-face declarations, unlike Firefox. This limitation prevents developers from defining variation behavior during font loading, requiring the same settings to be applied repeatedly across different components or selectors.

references