The font-feature-settings property turns OpenType features on or off with four-letter tags such as "liga", "tnum", and "smcp". The active font-family must include the feature or you will see no change.
The initial value is normal. Prefer higher-level properties when they exist: font-variant, font-variant-caps, font-variant-ligatures, and font-variant-numeric.
Use font-feature-settings for tags those properties cannot express. Avoid it for everyday small caps — use font-variant-caps instead.
Not deprecated and not experimental. Baseline widely available across modern browsers.
font-feature-settings: normal | <feature-tag-value># | initial | inherit;A feature tag is a quoted 4-letter string, optionally followed by on/1 or off/0. Example: "liga" 0.
| Value | Description | Try it |
|---|---|---|
normal | Default. Use the font’s normal feature settings | Try it |
"liga" | Standard ligatures (often on by default) | Try it |
"tnum" | Tabular (fixed-width) figures | Try it |
"smcp" | Small caps (prefer font-variant-caps when you can) | Try it |
"zero" | Slashed zero | Try it |
"frac" | Diagonal fractions | Try it |
on / 1 | Enable the tag (default if the number is omitted) | Try it |
off / 0 | Disable the tag | Try it |
inherit | Takes the parent value (property is inherited) | Try it |
font-feature-settingsConfirm the font supports the tag, then toggle it with a short quoted code.
font-variant longhand already covers it.font-feature-settings to a quoted tag, e.g. "tnum".0 or off to disable a feature that is on by default (common for "liga").| Piece | Required? | Role |
|---|---|---|
| 4-letter tag | Yes (unless normal) | Names the OpenType feature |
| Value | Optional | 1/on enable; 0/off disable |
| Supporting font | Yes | Without the feature in the font file, nothing changes |
Change only font-feature-settings. Visible results depend on the fonts installed here.
Each snippet focuses on font-feature-settings. Effects appear only when the font supports the tag. Use Try It Yourself for a live editor.
Common ligatures are often on. Set "liga" 0 to disable them.
<style>
p {
font-feature-settings: "liga" 0;
}
</style>
<p>Office waffle</p>"liga" is a four-letter OpenType code.0. That means off (off is the same).fi / fl. With liga off, letters stay separate when the font supports the feature.liga table in the font means no visible change.Fixed-width digits help columns of numbers line up.
<style>
p {
font-feature-settings: "tnum";
}
</style>
<p>011<br>3.14<br>2.71</p>"tnum". Omitting a number means on / 1.font-variant-numeric for a higher-level option.Comma-separate several feature tags in one declaration.
<style>
p {
font-feature-settings: "smcp", "zero";
}
</style>
<p>Css 100</p>"smcp" requests small-cap forms when available."zero" requests a slashed zero when available.font-variant-caps for everyday cases.Silent no-ops are common. Match the tag to a font that actually ships it.
The declaration is valid either way. Always verify with a font that documents the tag.
font-variant-* firstHigher-level properties are clearer and play better with the cascade. Keep this property for special OpenType cases.
Tags must be four characters in the printable ASCII range. Wrong length makes the descriptor invalid.
A later font-feature-settings does not merge with an earlier one. List every tag you need in the winning rule.
Fancy alternates are decorative. Keep the underlying text readable if features fail to apply.
font-feature-settings is a browser style property. Node.js, Deno, and Bun do not apply it.
Chrome 48+ (prefixed earlier), Firefox 34+, Safari 9.1+, Edge 12+, Opera (Chromium), Internet Explorer 10+. Unprefixed in modern engines.
Bottom line: Safe for production. Visible results still depend on OpenType features inside the chosen font.
font-variant-* when a high-level property exists."tag" plus optional 1/0 or on/off.One line: font-feature-settings toggles OpenType tags when higher-level font-variant properties are not enough.
Control how tightly letter pairs sit together.
8 people found this page helpful