CSS font-feature-settings Property

The font-feature-settings property controls 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 specified, the initial value will be "1". For adding multiple features, the values should be followed by each other in a comma-separated list.

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 for enabling small caps.

Some prefixes may be needed for better browser support.

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 of the font-feature-settings property:

<!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

chrome edge firefox safari opera
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-

Practice Your Knowledge

What is the font-feature-settings CSS property used for?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?