Hurry! Try our new Interactive Courses for FREE. 🥳   🚀

CSS font-feature-settings Property

The font-feature-settings property in CSS is identified for controlling the advanced typographic features in Open type fonts. Web authors use the font-variant shorthand property or longhand property like the font-variant-caps, font-variant-ligatures, etc wherever it is possible.

It leads to even more effective and understandable results than the font-feature-settings property.

Syntax

normal | <feature-tag-value>#where <feature-tag-value> = <string> [ <integer> | on | off ]?

Example 1: CSS font-feature-settings Property

Here in the example below, we are using the font-feature-settings property with different border styles, colors, and different values.

In this case, we have given the font-feature setting property value as smcp and swsh. You can give any title to your program and you can also indent your text and object according to your selection of colors or styles or variants, etc.

<!DOCTYPE html>
<html>
<head>
	<title>The font-feature settings property in CSS</title>
	<style type="text/css">
		p { 
			color: green;
			padding: 5px;
			font-feature-settings: "smcp", "swsh" 2;
		 }
	</style>
</head>
<body>
	<p>Simplified Programming Education Enjoy the #rightway to learn coding.</p>
</body>
</html>

Output

Example 2: CSS font-feature-settings Property

Here in the example below, we are using the font-feature-settings property with different border styles, colors, and different values. In this case, we have given the font-feature setting property value as swsh.

<!DOCTYPE html>
<html>

<head>
	<title>The font-feature settings property in CSS</title>
	<style type="text/css">
		p { 
			color: green;
			padding: 5px;
			font-feature-settings: "swsh" 2;
		 }
	</style>
</head>

<body>
	<p>Simplified Programming Education Enjoy the #rightway to learn coding.</p>
</body>

</html>

Output

Live Example

Here in this live example, you can easily test the live coding and execute the example using different values or edit the coding and create your own example.

Browser Compatibility

The term 'browser compatibility' indicates the ability of a particular website to appear fully functional on several browsers, available in the market. This means that the HTML coding of the website and the scripts on that website must be compatible to run on the browsers. 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 48 48
Edge 15 15
Firefox 34 34
Internet Explorer 10 10
Opera 35 35
Safari 9.1 9.1
Webview Android 4.4 4.4
Chrome Android 48 48
Firefox Android 34 34
Opera Android 35 35
IOS Safari 9.3 9.3
Samsung Internet 5.0 5.0

Conclusion

The initial value for the font-feature settings property 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 as specified.