font-feature-settings is a CSS property that gives you low-level control over OpenType font features. It uses 4-character tags (like "liga", "smcp", "onum") with values of 0 (off) or 1 (on) to enable or disable specific typographic features built into OpenType fonts. Unlike the higher-level font-variant-* properties, font-feature-settings directly maps to OpenType feature tags, giving you precise control. Learn more on MDN.

Many professional fonts include OpenType features. Google Fonts like EB Garamond, Playfair Display, Lora, and Source Serif 4 offer rich feature sets. Premium fonts from foundries like Linotype, Monotype, and Adobe typically include extensive OpenType tables. System fonts like Georgia (macOS/Windows) and Hoefler Text (macOS) also support common features like ligatures and kerning. The features actually available vary significantly by font.

liga (Common Ligatures) are standard ligatures like fi, fl, ff, ffi, and ffl — these are enabled by default in most browsers for fonts that support them. dlig (Discretionary Ligatures) are decorative ligatures like st, ct, sp, and fj — these are usually off by default and used for stylistic effect. Discretionary ligatures can look odd in body text but add elegance to headings and display typography.

Stylistic Sets are font-specific collections of alternate glyphs. Each font designer defines what ss01, ss02, etc. actually change. For example, in EB Garamond, ss01 might swap the default 'a' for an alternate form, while ss02 might change the 'g'. In Inter, ss01 provides an alternate 'a' with a straight back. You need to consult each font's documentation to understand its stylistic sets. Most fonts support 1–5 sets, though the OpenType spec allows up to 20.

font-variant-* (like font-variant-ligatures, font-variant-caps, font-variant-numeric) are high-level CSS properties with human-readable values (e.g., font-variant-caps: small-caps). font-feature-settings uses raw OpenType tags (e.g., "smcp" 1). The high-level properties are generally preferred for better browser compatibility and cascade behavior, but font-feature-settings offers more granular control. You can use both together, but be careful — font-feature-settings can override font-variant-* values.

Common reasons: (1) The font you're using doesn't include that specific OpenType feature — not all fonts have all features. (2) The browser doesn't support that particular feature tag. (3) Another CSS rule is overriding your font-feature-settings. (4) The font file loaded is a subset that stripped OpenType tables. For testing, try EB Garamond from Google Fonts — it has one of the widest OpenType feature sets available for free. Also check that the font is fully loaded before testing.

Oldstyle (or lowercase) numerals have varying heights — some digits descend below the baseline (like 3, 4, 5, 7, 9) while others sit at x-height (like 0, 1, 2, 6, 8). They blend harmoniously into body text. Lining numerals (lnum) are uniform in height, like capital letters — ideal for tables, headings, and financial data. Most fonts default to lining numerals. Switching to oldstyle can dramatically change the feel of your typography.

Yes. font-feature-settings is supported in all modern browsers, including Chrome, Firefox, Safari, and Edge, going back to IE 10+. However, the actual rendering depends on the operating system's text engine and the specific font files. Some features (like stylistic sets and swashes) may render differently across browsers and OSes. Always test across platforms when using OpenType features in production. Safari on macOS generally has excellent OpenType support.