CSS - Font functions

Quiz

Font-variant-alternates

The CSS property font-variant-alternates manages the use of alternate glyphs, which can be referred to by the names defined in @font-feature-values.

This property can be used to associate the human-readable name of a font with a numeric index that controls certain OpenType font features.
For features that select alternate glyphs (such as stylistic, styleset, character variant, swash, ornament, or annotation), font-variant-alternates can apply the associated feature using the linked name.
This approach allows CSS rules to enable alternate glyphs without needing to know the specific index values used by the font.

There are two possible formats for this property:

It can be specified with the keyword normal.

Alternatively, it can be defined with one or more of the listed keywords and functions, separated by spaces and in any order.

Possible Values

normal - This keyword disables alternate glyphs.
historical-forms - This keyword activates historical forms which represent glyphs that were widely used in the past but are no longer used commonly used today. It corresponds to the OpenType value hist.
stylistic() - This function activates stylistic alternates for certain characters using a font-specific name associated with a number. It corresponds to the OpenType value salt and salt2.
stylesheet() - This function activates stylistic alternatives for groups of characters. The parameter is a font-specific name associated with a number, such as ss02, corresponding to the OpenType value ssXY.
character-variant() - This function allows distinct stylistic variations for individual characters, unlike styleset(), which creates coherent glyphs for a character set. The parameter, a font-specific name linked to a number (e.g., cv02), corresponds to the OpenType value cvXY.
swash() - This function activates swash glyphs with a font-specific name associated with a number, e.g. swsh 2 and cswh 2, which correspond to the OpenType values swsh and cswh.
ornaments() - This function activates ornaments such as fleurons and dingbat glyphs using a font-specific name associated with a number, such as ornm 2, which corresponds to the OpenType value ornm.
annotation() - This function allows annotations such as circled digits or inverted characters using a font-specific name associated with a number, for example, nalt 2, which corresponds to the OpenType value nalt.

Syntax

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

Applies to

All the HTML elements. It also applies to ::first-letter and ::first-line.

CSS font function - swash glyphs

The following example demonstrates enabling swash glyphs

<html>
<head>
<style>
   @font-face {
      font-family: 'Playfair Display';
      src: url('PlayfairDisplay-Regular.ttf');
   }
   @font-face {
      font-family: 'Lobster';
      src: url('Lobster-Regular.ttf');
   }
   @font-face {
      font-family: 'Great Vibes';
      src: url('GreatVibes-Regular.ttf');
   }
   .swash {
      font-size: 3rem;
      margin: 1rem;
      display: inline-block;
      font-family: 'Playfair Display', serif;
   }
   .swash.lobster {
      font-family: 'Lobster', cursive;
   }
   .swash.great-vibes {
      font-family: 'Great Vibes', cursive;
   }
</style>
</head>
<body>
   <h1>Swash Enabling Glyphs</h1>
   <div class="swash">A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</div>
   <div class="swash lobster">A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</div>
   <div class="swash great-vibes">A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</div>
</body>
</html>

CSS font function - swash glyphs

The following example demonstrates enabling swash glyphs

<html>
<head>
<style>
   @font-face {
      font-family: 'Lobster';
      src: url('Lobster-Regular.ttf');
      font-weight: normal;
      font-style: normal;
   }
   @font-face {
      font-family: 'Kaushan Script';
      src: url('KaushanScript-Regular.ttf');
      font-weight: normal;
      font-style: normal;
   }
   .swash {
      font-family: 'Lobster', cursive;
      font-size: 50px;
      color: #FF5733;
   }
   .normal {
      font-family: 'Kaushan Script', cursive;
      font-size: 50px;
      color: #FFC300;
   }
</style>
</head>
<body>
   <h1>Swash Glyphs</h1>
   <p class="swash">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
   <p class="normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
</html>

Print Page