font-feature-settings

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.

The font-feature-settingsCSS property controls advanced typographic features in OpenType fonts.

Try it

font-feature-settings: normal;

font-feature-settings: "liga" 0;

font-feature-settings: "tnum";

font-feature-settings: "smcp", "zero";

<section id="default-example"> <div id="example-element"> <p>Difficult waffles</p> <table> <tr> <td><span class="tabular">0O</span></td> </tr> <tr> <td><span class="tabular">3.14</span></td> </tr> <tr> <td><span class="tabular">2.71</span></td> </tr> </table> </div> </section>

@font-face { font-family: "Fira Sans"; src: local("FiraSans-Regular"), url("/shared-assets/fonts/FiraSans-Regular.woff2") format("woff2"); font-weight: normal; font-style: normal; } section { font-family: "Fira Sans", sans-serif; margin-top: 10px; font-size: 1.5em; } #example-element table { margin-left: auto; margin-right: auto; } .tabular { border: 1px solid; }

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; font-feature-settings: "smcp", "swsh" 2; /* Global values */ font-feature-settings: inherit; font-feature-settings: initial; font-feature-settings: revert; font-feature-settings: revert-layer; font-feature-settings: unset;

Whenever possible, Web authors should instead use the font-variant shorthand property or an associated longhand property such as font-variant-ligatures, font-variant-caps, font-variant-east-asian, font-variant-alternates, font-variant-numeric or font-variant-position.

These lead to more effective, predictable, understandable results than font-feature-settings, which is a low-level feature designed to handle special cases where no other way exists to enable or access an OpenType font feature. In particular, font-feature-settings shouldn't be used to enable small caps.

Values

This property 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.

Formal definition

Initial value	`normal`
Applies to	all elements and text. It also applies to `::first-letter` and `::first-line`.
Inherited	yes
Computed value	as specified
Animation type	discrete

Formal syntax

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

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

<opentype-tag> = 
<string>

Examples

Enabling various font features

css

/* use small-cap alternate glyphs */ .small-caps { font-feature-settings: "smcp" on; } /* convert both upper and lowercase to small caps (affects punctuation also) */ .all-small-caps { font-feature-settings: "c2sc", "smcp"; } /* use zeros with a slash through them to differentiate from "O" */ .nice-zero { font-feature-settings: "zero"; } /* enable historical forms */ .historical { font-feature-settings: "hist"; } /* disable common ligatures, usually on by default */ .no-ligatures { font-feature-settings: "liga" 0; } /* enable tabular (monospaced) figures */ td.tabular { font-feature-settings: "tnum"; } /* enable automatic fractions */ .fractions { font-feature-settings: "frac"; } /* use the second available swash character */ .swash { font-feature-settings: "swsh" 2; } /* enable stylistic set 7 */ .fancy-style { font-family: Gabriola; font-feature-settings: "ss07"; }

Specifications

Specification
CSS Fonts Module Level 4 # font-feature-settings-prop