demo · v140

Preset Builder

Bake a variable-font preset into a @font-face rule. Adjust axes on the left, pick a preset on the right — the generated @font-face rule on the bottom is what your stylesheet would include.

Quick brown fox jumps over the lazy dog 0123

@font-face {
  font-family: "Recursive Display";
  src: url("recursive.woff2") format("woff2-variations");
  font-variation-settings: "wght" 800, "CASL" 0.2;   /* baked-in preset */
}

/* Now use the preset name like any plain font */
h1 { font-family: "Recursive Display", serif; }

see also