demo · v140

Font as shipped

The chromestatus motivation: previously you had to set font-variation-settings on every selector that used the font. With Chrome 140 you declare it once inside @font-face — every use of the family inherits the defaults. Same as Firefox has supported for years.

The stage below uses font-family: "FontTuned", which is declared in this page with font-variation-settings: "wght" 600, "slnt" -8 in the @font-face block. In Chrome 140+ every word below renders with the tuned axes baked in.

Headline that ships with weight 600, slant -8

Body copy in the same family also inherits the variation settings — no per-selector override needed. Type designers and brand systems get a single source of truth for the font's default state.

pre-140 — settings live on every selector

@font-face {
  font-family: "FontTuned";
  src: url(/inter.woff2);
  /* font-variation-settings was IGNORED here */
}

h1, h2, h3, .lede, .nav, .footer, .button, .pill {
  font-family: "FontTuned";
  font-variation-settings: "wght" 600, "slnt" -8;
}

Chrome 140 — once in the font

@font-face {
  font-family: "FontTuned";
  src: url(/inter.woff2);
  font-variation-settings: "wght" 600, "slnt" -8;
}

/* All these inherit the settings automatically: */
h1, h2, h3, .lede, .nav, .footer, .button, .pill {
  font-family: "FontTuned";
}
@font-face {
  font-family: "BrandSans";
  src: url(/brand.woff2) format("woff2");
  font-weight: 100 900;
  font-stretch: 75% 125%;
  /* Chrome 140+ — defaults baked into the font registration */
  font-variation-settings:
    "wght" 470,   /* tuned in-between weight */
    "wdth" 102,   /* very slightly wide */
    "GRAD" 25;    /* tiny optical grade */
}

see also

scenario focus

Select a scenario to focus its rendered example and summary.