/* Keyword values */ font-variant-alternates: normal; font-variant-alternates: historical-forms;  /* Functional notation values */ font-variant-alternates: stylistic(user-defined-ident); font-variant-alternates: styleset(user-defined-ident); font-variant-alternates: character-variant(user-defined-ident); font-variant-alternates: swash(user-defined-ident); font-variant-alternates: ornaments(user-defined-ident); font-variant-alternates: annotation(user-defined-ident); font-variant-alternates: swash(ident1) annotation(ident2);  /* Global values */ font-variant-alternates: initial; font-variant-alternates: inherit; font-variant-alternates: revert; font-variant-alternates: unset; 

font-variant-alternates

The font-variant-alternates CSS property controls the usage of alternate glyphs. These alternate glyphs may be referenced by alternative names defined in @font-feature-values.

/* Keyword values */ font-variant-alternates: normal; font-variant-alternates: historical-forms;  /* Functional notation values */ font-variant-alternates: stylistic(user-defined-ident); font-variant-alternates: styleset(user-defined-ident); font-variant-alternates: character-variant(user-defined-ident); font-variant-alternates: swash(user-defined-ident); font-variant-alternates: ornaments(user-defined-ident); font-variant-alternates: annotation(user-defined-ident); font-variant-alternates: swash(ident1) annotation(ident2);  /* Global values */ font-variant-alternates: initial; font-variant-alternates: inherit; font-variant-alternates: revert; font-variant-alternates: unset; 

The @font-feature-values at-rule can define names for alternative glyph functions (stylistic, styleset, character-variant, swash, ornament or annotation), associating the name with OpenType parameters. This property allows those human-readable names (defined in @font-feature-values) in the stylesheet.

Syntax

This property may take one of two forms:

Values

This keyword deactivates alternate glyphs.

This keyword enables historical forms — glyphs that were common in the past but not today. It corresponds to the OpenType value hist.

This function enables stylistic alternates for individual characters. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value salt, like salt 2.

This function enables stylistic alternatives for sets of characters. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value ssXY, like ss02.

This function enables specific stylistic alternatives for characters. It is similar to styleset(), but doesn't create coherent glyphs for a set of characters; individual characters will have independent and not necessarily coherent styles. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value cvXY, like cv02.

This function enables swash glyphs. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType values swsh and cswh, like swsh 2 and cswh 2.

This function enables ornaments, like fleurons and other dingbat glyphs. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value ornm, like ornm 2.

Note: In order to preserve text semantics, font designers should include ornaments that don't match Unicode dingbat characters as ornamental variants of the bullet character (U+2022). Be aware that some existing fonts don't follow this advice.

This function enables annotations, like circled digits or inverted characters. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value nalt, like nalt 2.

Formal definition

Formal syntax

normal | [ stylistic( <feature-value-name> ) || historical-forms || styleset( <feature-value-name># ) || character-variant( <feature-value-name># ) || swash( <feature-value-name> ) || ornaments( <feature-value-name> ) || annotation( <feature-value-name> ) ]
where <feature-value-name> = <custom-ident>

Examples

HTML

<p>Firefox rocks!</p> <p class="variant">Firefox rocks!</p> 

CSS

@font-feature-values "Leitura Display Swashes" {     @swash { fancy: 1 } }  p {   font-size: 1.5rem; }  .variant {   font-family: Leitura Display Swashes;   font-variant-alternates: swash(fancy); } 

Result

Note: You need to install the OpenType font Leitura Display Swashes for this example to work. You can find a few free versions for testing purposes, for example from fontsgeek.com.

Specifications

Not part of any standard.

See Also

Last modified: Aug 12, 2021, by MDN contributors