CSS font-feature-settings Property

❮ Prev Next ❯

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>

Try it Yourself »

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.