Fonts & counters

@font-face

Defines a web font: a family name to use in font-family, where to download the font file, and which weights, styles and characters that file covers. Several @font-face rules with the same family name build one family from several files.

@font-face {
  font-family: "Inter";
  src: url("inter.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

body { font-family: "Inter", system-ui, sans-serif; }

src is a comma-separated list tried in order. Each entry is a url(), optionally followed by format() and tech() hints so the browser can skip files it cannot use, or local() to use a font already installed. font-weight, font-style and font-width take two values to declare a range for a variable font.

font-display decides what happens while the file loads: block hides text briefly, swap shows a fallback font at once and swaps when the file arrives, fallback and optional give the file a shorter window and then keep the fallback. size-adjust and the *-override descriptors tune a local fallback font's metrics to match the web font, so text shifts less when the swap happens. unicode-range lists the characters a file covers, and the browser downloads that file only if the page uses one of them.

@font-feature-values

Gives readable names to a font's numbered alternate glyphs, so font-variant-alternates can turn them on by name. Inside it, one block per kind of alternate maps each name to the index the font uses.

@font-feature-values "Fancy Serif" {
  @styleset { alt-g: 2; }
  @swash { flourish: 1; }
}

h1 {
  font-family: "Fancy Serif";
  font-variant-alternates: styleset(alt-g) swash(flourish);
}

The names apply only to the font families listed in the prelude, so the same name can mean a different index in another font.

@font-palette-values

Defines a named colour palette for a colour font: start from one of the palettes built into the font and replace any of its colours. Apply it with font-palette.

@font-palette-values --brand {
  font-family: "Bungee Spice";
  base-palette: 0;
  override-colors: 0 #c00, 1 #f80;
}

h1 { font-family: "Bungee Spice"; font-palette: --brand; }

@counter-style

Defines a custom counter style for list markers and counter(): which symbols to use, how to combine them into numbers, and what goes before and after. Use its name in list-style-type like a built-in style such as decimal.

@counter-style arrows {
  system: cyclic;
  symbols: "▸";
  suffix: " ";
}

ul.steps { list-style-type: arrows; }

system sets the algorithm: cyclic loops through the symbols, numeric and alphabetic treat them as digits, additive builds values from weighted symbols as Roman numerals do, and extends copies another style and changes only the descriptors you give. A value outside range, or one the system cannot represent, is drawn with the fallback style.