font
@font-feature-values
Defines human-readable names for OpenType feature indices belonging to a specific font family, so authors can activate them via font-variant-alternates. It bridges obscure OpenType tag numbers to memorable identifiers.
@font-feature-values <family> { @<feature-type> { <name>: <index>; } }Common conditions / descriptors
| Descriptor | Purpose |
|---|---|
| @styleset | Named alternates activated with font-variant-alternates: styleset(name) |
| @stylistic | Single-glyph stylistic alternates |
| @character-variant | Per-glyph character variants |
| @swash | Swash alternates for scripts |
| @ornaments | Ornament glyph set |
| @annotation | Annotation forms like circled digits |
Examples
@font-feature-values 'Fira Code' {
@styleset { alt-zero: 1; alt-a: 2; }
}
code { font-variant-alternates: styleset(alt-zero, alt-a); }Name two stylistic sets and enable both on code blocks
@font-feature-values 'Recursive' {
@character-variant { code-zero: 1; }
}
.mono { font-variant-alternates: character-variant(code-zero); }Turn on a slashed-zero character variant
@font-feature-values 'Playfair Display' {
@swash { fancy: 1; }
}
h1 { font-variant-alternates: swash(fancy); }Enable swash caps on display headings
@supports (font-variant-alternates: styleset(x)) {
code { font-variant-alternates: styleset(alt-zero); }
}Feature-detect before shipping alternates in production
Gotcha
The family name in @font-feature-values must match the font-family string exactly for the mapping to activate. Support is limited outside Safari and recent Chromium — always feature-detect and provide a neutral fallback.
Related at-rules
@font-face
Registers a custom font family from a downloadable source so it can be referenced by font-family. Descriptors control weight, style, unicode range, and how text renders while the font loads.
@supports
Applies rules only when the browser supports the tested CSS feature, enabling progressive enhancement without JavaScript. Conditions can be combined with and, or, and not.
@import
Pulls another stylesheet into the current one at parse time, optionally scoped to a cascade layer, supports condition, or media query. It must appear at the top of a stylesheet, before all other rules except @charset and @layer statements.