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>

Result

CSS font-variant-alternates Property

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

chrome edge firefox safari opera
34.0+ 9.1+

Practice Your Knowledge

What function does the 'font-variant-alternates' property in CSS have?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?