v154 · css · fonts

FontFace.width and the font-width descriptor

The axis that makes a typeface narrower or wider has been called stretch in the object model and font-stretch in CSS. CSS Fonts 4 renamed it to width and font-width, because that is what it is. Chrome 154 exposes the new names as aliases — the same underlying value, reachable either way.

concepts

  1. Two names, one value

    Set it through one name and read it back through the other, in both directions, on a real FontFace. An alias is only an alias if writing either one changes both, and that is a thing to check rather than assume.

  2. The CSS side

    font-width against font-stretch, as a property and as an @font-face descriptor, with the computed values read back. Includes the keyword ladder and what each one means as a percentage.

  3. Writing for both

    What to actually ship while both names are in the wild: which to write first, why the order matters in a cascade, and a detection helper you can copy — with its own results shown live.

why it shipped

The name was wrong. stretch suggests distortion — taking a typeface and scaling it horizontally, which is the thing typographers spend their careers asking people not to do. The property never meant that: it selects a face that was designed narrow or wide, or a position on a variable font's wdth axis. CSS Fonts 4 renamed it to match the OpenType axis it controls.

Renaming a shipped property is not free, so both names stay, permanently, as aliases for one value. This is the same pattern as font-stretch's own percentage syntax: the platform grows a better name and keeps the old one working forever.

the API

const face = new FontFace("Inter", "url(inter.woff2)", { width: "75%" });
face.stretch;   // "75%" — the same slot, the older name

@font-face {
  font-family: Inter;
  src: url(inter.woff2);
  font-width: 75%;     /* was: font-stretch: 75% */
}

.condensed { font-width: condensed; }   /* keywords still work */

references