X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

CSS font-variant-alternates Property

The font-variant-alternates property controls 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>

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.

Browser support

x x 34.0+ 9.1+ x


Do you find this helpful?

Related articles