font-feature-settings

The font-feature-settings CSS descriptor allows you to define the initial settings to use for the font defined by the @font-face at-rule. You can further use this descriptor to control typographic font features such as ligatures, small caps, and swashes, for the font defined by @font-face. The values for this descriptor are the same as the font-feature-settings property, except for the global keyword values.

Since this descriptor sets feature values on the font object in the @font-face at-rule and not on an entire element, only some glyphs in an element may be rendered using this descriptor.

Syntax

css
/* Use the default settings */
font-feature-settings: normal;

/* Set values for OpenType feature tags */
font-feature-settings: "smcp";
font-feature-settings: "smcp" on;
font-feature-settings: "swsh" 2;

Values

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+20U+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.

Formal definition

Formal syntax

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

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

<opentype-tag> =
<string>

Examples

Enabling swash glyphs using the @font-face at-rule

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

html
<p class="swash-off">Swash is off here</p>
<p class="swash-on">Swash is on here</p>

CSS

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;
}
.swash-off {
  font-family: MonteCarlo;
}
.swash-on {
  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.

Specifications

Specification
CSS Fonts Module Level 4
# font-rend-desc

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
font-feature-settings

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

See also