CSS font-variant-alternates Property

The font-variant-alternates property takes control over the selection of alternate glyphs.

The names of alternate glyph functions (styleset, stylistic, character-variant, ornament, swash, annotation) can be defined in @font-feature-values. The human-readable names specified in @font-feature-values are allowed in the stylesheet.

Initial Value	normal
Applies to	All elements. It also applies to ::first-letter and ::first-line.
Inherited	Yes.
Animatable	No.
Version	CSS3
DOM Syntax	object.style.fontVariantAlternates = "normal";

Syntax

font-variant-alternates: normal | historical-forms | stylistic() | styleset() | character-variant() | swash() | ornaments() | annotation();

Example of the font-variant-alternates property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      @font-feature-values "Leitura Display Swashes" {
        @swash {
          fancy: 1;
        }
      }
      p {
        font-size: 2rem;
      }
      .variant {
        font-family: Leitura Display Swashes;
        font-variant-alternates: swash(fancy);
      }
    </style>
  </head>
  <body>
    <h2>Font-variant-alternates property example</h2>
    <p>Only Firefox supports this property.</p>
    <p class="variant">Only Firefox supports this property.</p>
  </body>
</html>

Try it Yourself »

Result

Values

Value	Description
normal	None of the features are enabled.
historical forms	Enables display of historical forms.
stylistic()	Enables display of stylistic alternates.
styleset()	Enables display with stylistic sets.
character-variant()	Enables specific stylistic alternatives for characters.
swash()	Enables swash glyphs.
ornaments()	Enables display of ornaments.
annotation()	Enables alternate annotation forms.
initial	It makes the property use its default value.
inherit	It inherits the property from its parents element.