font-feature-settings

This descriptor is specified as either the keyword normal or as a comma-separated list of <feature-tag-value> values. When rendering text, the list of OpenType <feature-tag-value> values are passed to the text layout engine to enable or disable font features.

normal

Indicates that text is laid out using default font settings. This is the default value.

<feature-tag-value>

Represents a space-separated tuple consisting of a tag name and an optional value.

The tag name is always a <string> of four ASCII characters. If the tag name has more or fewer characters or if it contains characters outside the U+20 – U+7E code point range, the descriptor is invalid.

The optional value can be a positive integer or the keyword on or off. The keywords on and off are synonyms for the values 1 and 0, respectively. If no value is set, the default is 1. For non-boolean OpenType features (e.g., stylistic alternates), the value implies a particular glyph to be selected; for boolean features, the value turns the feature on or off.

font-feature-settings = 
  normal                |
  <feature-tag-value>#  

<feature-tag-value> = 
  <opentype-tag> [ <integer [0,∞]> | on | off ]?  

<opentype-tag> = 
  <string>  

In this example, the tag name swsh and a boolean value 1 are used as the value for the font-feature-settings descriptor in the @font-face at-rule.

HTML

<p class="swashoff">Swash is off here</p>
<p class="swashon">Swash is on here</p>

CSS

@font-face {
  font-family: MonteCarlo;
  src: url("montecarlo-regular.woff2");
}
@font-face {
  font-family: MonteCarlo2;
  src: url("montecarlo-regular.woff2");
  font-feature-settings: "swsh" 1;
}
p {
  font-size: 3rem;
  margin: 0.7rem 3rem;
}
.swashoff {
  font-family: MonteCarlo;
}
.swashon {
  font-family: MonteCarlo2;
}

Result

Line 1 shows the default ornate design of the MonteCarlo font, and line 2 shows the default glyphs being replaced with swash glyphs.

• Other @font-face descriptors: font-family, font-style, font-variation-settings, font-weight, src
• Related font properties: font-feature-settings, font-variant-alternates, font-variation-settings