demo · v140

Axis Range Demo

One variable font file, five named faces with different axis pins baked into @font-face. The slider generates a live @font-face rule. Compare direct font-weight interpolation against a pinned font-variation-settings descriptor.

Five faces from one font file — each @font-face pins a different wght

Width axis: condensed vs. expanded

Live @font-face editor — drag to pin wght axis

The quick brown fox jumps over the lazy dog
@font-face { ... }

font-weight: 700 — browser interpolation

Hamburgefons

Browser picks the nearest weight from what the variable font offers. May differ between browsers.

font-variation-settings: "wght" 700 in @font-face

Hamburgefons

Axis position is exact and deterministic — the same number renders identically across browsers.

Why use @font-face font-variation-settings? 
/* Five faces from one file — each @font-face pins a different wght */
@font-face {
  font-family: "RecursiveThin";
  src: url("recursive.woff2") format("woff2");
  font-variation-settings: "wght" 100;   /* baked in Chrome 140+ */
}
@font-face {
  font-family: "RecursiveBold";
  src: url("recursive.woff2") format("woff2");
  font-variation-settings: "wght" 700;
}

/* Usage: just set font-family, the weight is already baked */
h1 { font-family: "RecursiveBold"; }
p  { font-family: "RecursiveThin"; }

see also