font-feature-settings

The font-feature-settings CSS property gives you direct access to OpenType font features — the advanced typographic capabilities built into professional fonts. Features like ligatures, small caps, tabular numbers, contextual alternates, and swashes are controlled through four-letter OpenType feature tags.

/* Enable tabular (monospaced) numbers for data tables */
.price-column {
  font-feature-settings: "tnum" 1;
}

/* Enable small capitals */
.label {
  font-feature-settings: "smcp" 1;
}

/* Enable common and discretionary ligatures */
.editorial-text {
  font-feature-settings: "liga" 1, "dlig" 1;
}

/* Disable ligatures (useful in code editors) */
code {
  font-feature-settings: "liga" 0, "calt" 0;
}

Prefer high-level properties when available:

The CSS specification introduced dedicated properties for the most common features. These are more readable and compose better:

/* Preferred over font-feature-settings for these cases */
.text {
  font-variant-numeric: tabular-nums;
  font-variant-caps: small-caps;
  font-variant-ligatures: common-ligatures discretionary-ligatures;
}

Use font-feature-settings for features that don't have a dedicated property, or when you need precise control that the high-level properties don't offer.

Common OpenType feature tags:

Checking which features a font supports:

Not every font includes every feature. Inter has excellent support for tnum, calt, and several stylistic sets. EB Garamond has smcp, onum, and swsh. You can inspect a font's features using tools like the Wakamai Fondue web app or FontDrop.

/* Combining multiple features */
.refined-body-text {
  font-feature-settings:
    "kern" 1,  /* Kerning */
    "liga" 1,  /* Ligatures */
    "onum" 1,  /* Oldstyle figures */
    "calt" 1;  /* Contextual alternates */
}

One important caveat: font-feature-settings values don't cascade intuitively. Setting font-feature-settings: "tnum" 1 on a child element overrides all inherited font-feature-settings from parents, not just the tnum value. This is why high-level properties like font-variant-numeric are preferable when available — they cascade independently.