W3docs
en
Log in

CSS font-feature-settings Property

The font-feature-settings CSS property controls advanced typographic features in OpenType fonts. Read about the property and try examples.

The font-feature-settings property controls advanced typographic features in OpenType fonts. The property accepts normal or one or more <feature-tag-value> pairs. normal is the default value. Each <feature-tag-value> consists of a string (the OpenType feature tag) followed by an integer (the activation value). The keywords on and off are synonyms for 1 and 0 respectively. If no value is specified, the initial value is normal. Multiple features can be specified as a comma-separated list.

Many other values, besides standard ligatures, are supported by the font-feature-settings property, including small caps. However, the font-variant: small-caps property is the standard method for enabling them, so font-feature-settings should not be used for this purpose.

Some prefixes may be needed for better browser support.

Initial Valuenormal
Applies toAll elements. It also applies to ::first-letter and ::first-line.
InheritedYes.
AnimatableNo.
VersionCSS3
DOM Syntaxobject.style.fontFeatureSettings = "normal";

Syntax

Syntax of CSS font-feature-settings Property

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

Example of the font-feature-settings property:

Example of CSS font-feature-settings Property with smcp value

<!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>
Try it Yourself »

Values

ValueDescription
normalThis 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.
initialIt makes the property use its default value.
inheritIt inherits the property from its parents element.

Practice

Practice

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