Open In App

CSS font-variant-alternates Property

Improve
Improve
Like Article
Like
Save
Share
Report

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: 

  • Firefox 34
  • Safari 9.1

Last Updated : 26 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads