CSS font-feature-settings Property

CSS font-feature-settings Property

The font-feature-settings property in CSS allows you to enable or customize advanced OpenType font features, such as ligatures, stylistic alternates, small caps, old-style numbers, and more.

1. Syntax

selector {
  font-feature-settings: "feature-name" value;
}

• "feature-name" is an OpenType tag (e.g., "liga", "smcp", "onum").
• value is typically 0 (off) or 1 (on), but some features support other values.

2. Common OpenType Features

Feature Name	Tag	Description
Ligatures	"liga"	Enables standard ligatures (e.g., fi, fl).
Discretionary Ligatures	"dlig"	Enables fancy ligatures (if available).
Small Caps	"smcp"	Converts lowercase letters to small caps.
Old-Style Numbers	"onum"	Uses old-style numerals (with varying heights).
Tabular Numbers	"tnum"	Uses monospaced numerals.
Stylistic Sets	"ss01", "ss02"	Enables alternative glyph styles.

3. Example Usage

A. Enabling Ligatures

p {
  font-family: "Playfair Display", serif;
  font-feature-settings: "liga" 1; /* Enables ligatures */
}

✅ The letters fi and fl will merge into ligatures.

B. Using Small Caps & Old-Style Numbers

h1 {
  font-family: "Garamond", serif;
  font-feature-settings: "smcp" 1, "onum" 1;
}

✅ Converts lowercase letters to small caps and uses old-style numerals.

C. Enabling Stylistic Alternates

p {
  font-family: "Lora", serif;
  font-feature-settings: "ss02" 1; /* Activates the second stylistic set */
}

✅ Changes certain letter shapes based on available alternates.

4. When to Use font-feature-settings?

• When working with high-quality OpenType fonts.
• To enable typographic enhancements for branding, books, and UI design.
• When you need fine control over font appearance.

5. Alternative: font-variant (Easier to Use)

Instead of font-feature-settings, you can use font-variant (if supported):

p {
  font-variant-ligatures: discretionary-ligatures;
  font-variant-numeric: oldstyle-nums;
}

✅ This approach is more readable.

6. Browser Support

✅ Fully supported in Chrome, Firefox, Safari, and Edge.
✅ Works with fonts that support OpenType features.