CSS font-variant-alternates property

The font-variant-alternates property in CSS is identified for controlling the usage of alternate glyphs. Such alternate glyphs can be referenced by the alternative names which are defined in font-feature-values. The font-feature-values at-rule may define names for the alternative glyph functions, relating to the names with the OpenType parameters. this property can take any of the forms like- either the keyword 'normal' or may one or more of the other keywords and functions.

Syntax for font-variant-alternates property:

Following is the syntax for the font-variant-alternates property.

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

Example: CSS font-variant-alternates property

Here in the example below, we are using the font-variant-alternates property with different border styles, colors, and their different values. In this case, we have given the font-variant-alternates property value as swash fancy. So, the text gets designed in a specific style.

<!DOCTYPE html>
<html>
<head>
	<title>The font-variant-alternates property in CSS</title>
	<style type="text/css">
		@font-feature-values "Leitura Display Swashes" {
		    @swash { fancy: 1 }
		}
		
		p {
		  font-size: 1.5rem;
		}
		
		.variant {
		  font-family: Leitura Display Swashes;
		  font-variant-alternates: swash(fancy);
		}
	</style>
</head>
<body>
	<p>Study Tonight rocks!</p>
	<p class="variant">Study Tonight rocks!</p>
</body>
</html>

Output:

Example 2: CSS font-variant-alternates property

Here in the example below, we are using the font-variant-alternates property with different border styles, colors, and their different values. In this case, we have given the font-variant-alternates property value as an annotation. This gives an annotation to the text.

<!DOCTYPE html>
<html>

<head>
	<title>The font-variant-alternates property in CSS</title>
	<style type="text/css">
		p {
		  font-size: 1.5rem;
		  font-variant-alternates: annotation;
		}
		
		.variant {
		  font-family: Leitura Display Swashes;
		  font-variant-alternates: annotation;
		}
	</style>
</head>

<body>
	<p>Study Tonight rocks!</p>
	<p class="variant">Study Tonight rocks!</p>
</body>

</html>

Output:

Live Example

Here in this live example, you can test the code and execute the example using different values or even edit the code example.

Browser Compatibility

There are many browsers that do not support all the latest CSS properties. Hence, while developing any webpage, if you are using any CSS property you must check the browser compatibility for that CSS property and then use it. It is of immense importance today when there is a large variety of web browsers available.

Name of Browser Background size contain and cover
Chrome no no
Edge no no
Firefox 34 34
Internet Explorer no no
Opera no no
Safari no no
Webview Android no no
Chrome Android no no
Firefox Android 34 34
Opera Android no no
IOS Safari no no
Samsung Internet no no

Conclusion

The initial value for the font-variant-alternates property in CSS is normal. This property is applicable to all elements and also to the ::first-letter and ::first-line. It is an inherited property. The computed value for this property is the as specified one. The animation type for this property is discrete.