X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

CSS font-feature-settings Property

The font-feature-settings property takes control over advanced typographic features in OpenType fonts. The property has two values: normal and <feature-tag-value>. "Normal" is the default value. <feature-tag-value> value is a positive integer. The two keywords "on" and "off" are synonyms for "1" and "0" respectively. If no value is set, the default is "1".

Many other values, besides standard ligatures are supported by the font-feature-settings property, including small caps. In particular, font-feature-settings shouldn't be used to enable small caps.

Initial Value normal
Applies to All elements. It also applies to ::first-letter and ::first-line.
Inherited Yes.
Animatable No.
Version CSS3
DOM Syntax object.style.fontFeatureSettings = "normal";

Syntax

font-feature-settings: normal | <feature-tag-value> | initial | inherit;

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style> 
      h2 {
      font-family: sans-serif;
      }
      h3 {
      font-feature-settings: "smcp" 1;
      }
    </style>
  </head>
  <body>
    <h2>Font-feature-settings example</h2>
    <h3>The font-feature-settings CSS property controls advanced typographic features in OpenType fonts.</h3>
  </body>
</html>

Values

Value Description
normal This is the default value of this property.
<feature-tag-value> When rendering text, the list of OpenType feature tag value is passed to the text layout engine to enable or disable font features.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.

Browser support

48.0+
21.0-47.0 -webkit-
12.0+ 34.0+
15.0-33.0 -moz-
9.1+ 35.0+
15.0-34.0 -webkit-


Do you find this helpful?

Related articles