demo · v140

Family Variants

One .woff2 file on the wire, four families in CSS. Each @font-face rule names a different family but loads the same font and applies a different baked variation set. Authors pick the family the design needs without recomputing axes at the point of use.

Recursive — base regularThe quick brown fox jumps

Recursive Display — wght 800, CASL 0.5The quick brown fox jumps

Recursive Mono — wght 450, MONO 1The quick brown fox jumps

Recursive Italic — wght 500, slnt -12, CASL 0.2The quick brown fox jumps

@font-face { font-family: "Recursive";         src: url(rec.woff2) format("woff2-variations");
             font-variation-settings: "wght" 400; }
@font-face { font-family: "Recursive Display"; src: url(rec.woff2) format("woff2-variations");
             font-variation-settings: "wght" 800, "CASL" 0.5; }
@font-face { font-family: "Recursive Mono";    src: url(rec.woff2) format("woff2-variations");
             font-variation-settings: "wght" 450, "MONO" 1; }

see also

scenario focus

Select a scenario to focus its rendered example and summary.