Skip to content
Related Articles

Related Articles

Improve Article

CSS font-variant-alternates Property

  • Difficulty Level : Medium
  • Last Updated : 15 Oct, 2020
Geek Week

The font-variant-alternates property is one of the CSS3 properties that is generally used  for enabling various font related features that can improve the appearance of the text on the page. The font-variant-alternates property is used to specifically select alternate glyphs.

For any given character, a variety of alternate glyphs can be provided by fonts in addition to the default glyph for that character. Through font-variant-alternates property you can  select which specific glyph you require for a given situation.

Syntax:

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

Property Values:

  • Keyword Values: It takes keyword values as “normal” and “historical-forms”.
  • Functional Notation Values: It takes functional notation values as “swash”, “ornaments”, “annotation”, “styleset”, “stylistic”.
  • Global Values: It takes global values as “initial”, “inherit” and “unset”.

Example:

HTML




<!DOCTYPE html>
<html>
 
<head>
    <style>
        @font-feature-values "Leitura Display Swashes" {
            @swash {
                fancy: 1;
            }
        }
 
        p {
            font-size: 5rem;
        }
 
        .variantAlternates {
            font-family: Leitura Display Swashes;
            font-variant-alternates: swash(fancy);
            color: green;
        }
    </style>
</head>
 
<body>
    <p class="variantAlternates">GeeksforGeeks</p>
 
</body>
 
</html>

Output:

Output for the above code.

Supported Browsers: This property is supported by only Firefox Browser.

My Personal Notes arrow_drop_up
Recommended Articles
Page :