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 gives you low-level control over the advanced typographic features built into OpenType fonts — things like small caps, old-style figures, ligatures, fractions, and stylistic alternates. These features are designed by the type designer and stored inside the font file; font-feature-settings is the switch that turns them on or off.
The value is either the keyword normal (the default) or a comma-separated list of <feature-tag-value> pairs. Each pair is a four-letter OpenType feature tag written as a string, optionally followed by a value:
font-feature-settings: "smcp" 1; /* enable small caps */
font-feature-settings: "smcp" on; /* same thing — "on" means 1 */
font-feature-settings: "smcp", "onum"; /* two features, omitted value defaults to 1 */
font-feature-settings: "liga" 0; /* disable standard ligatures */The keywords on and off are synonyms for 1 and 0. Most features are simple on/off toggles, but a few (such as stylistic sets or character variants) accept a higher integer to select a specific variant. The feature only has a visible effect when the rendered font actually contains that feature — if the font lacks it, the declaration is silently ignored.
When to use it (and when not to)
font-feature-settings is the escape hatch. For common needs, prefer the higher-level font-variant shorthand and its sub-properties (font-variant-caps, font-variant-numeric, font-variant-ligatures, …). They are easier to read, they are inherited cleanly, and they fall back gracefully:
/* Preferred — high-level and readable */
font-variant-caps: small-caps;
/* Low-level equivalent — only when the font has no friendlier path */
font-feature-settings: "smcp";Reach for font-feature-settings only when you need a feature that has no dedicated font-variant keyword — for example a font-specific stylistic set ("ss01") or a discretionary feature the font exposes by tag.
One important gotcha: font-feature-settings is all-or-nothing. Because the whole list replaces any inherited value, re-declaring it on a child element resets every feature you set on the parent. Keep all the tags you want active in a single declaration rather than spreading them across rules.
Common OpenType feature tags
| Tag | Feature | Typical use |
|---|---|---|
smcp | Small caps | Render lowercase letters as small capitals. |
c2sc | Caps to small caps | Turn uppercase letters into small caps too. |
liga | Standard ligatures | Combine letter pairs like fi, fl (on by default; set 0 to disable). |
dlig | Discretionary ligatures | Decorative ligatures such as ct, st. |
onum | Old-style figures | Numerals with ascenders/descenders that sit in running text. |
lnum | Lining figures | Uniform-height numerals aligned to the cap height. |
tnum | Tabular figures | Fixed-width numerals for columns of numbers. |
frac | Fractions | Format 1/2 as a typographic fraction. |
kern | Kerning | Adjust spacing between specific letter pairs. |
swsh | Swashes | Decorative flourishes on glyphs. |
Browser support is excellent in modern browsers, but for older engines you may still see the -webkit-, -moz-, and -ms- prefixed versions of this property.
| 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
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>Example with multiple features
You can enable several features at once with a comma-separated list. Here we turn on old-style figures and disable standard ligatures on the same element:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
font-feature-settings: "onum" 1, "liga" 0;
}
</style>
</head>
<body>
<p>Order 1234567890 ships in office. </p>
</body>
</html>Note that the figures change only if the chosen font ships old-style numerals. If a feature is missing from the font, that part of the declaration has no effect.
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. |
Related properties
- font-variant — the high-level shorthand that should be your first choice for caps, ligatures, and numeric figures.
- font-family — choosing a font that actually contains the OpenType features you want to enable.
- text-transform — changes the case of the characters themselves, unlike small caps which only changes their appearance.
- letter-spacing — adjust spacing between characters at the layout level rather than through font kerning.