CSS font-feature-settings Property

What You’ll Learn

The font-feature-settings property controls advanced OpenType features in fonts, such as ligatures and small caps. It helps you fine-tune typography for a more polished look.

Introduction

The font-feature-settings property in CSS allows web developers to control advanced typographic features in OpenType fonts. This includes ligatures, alternate glyphs, and other font-specific variations that can enhance the readability and aesthetics of text.

Definition and Usage

By using this property, you can fine-tune the typography on your website to achieve a more polished and professional look. Apply it when a font supports OpenType features and you need precise control beyond basic properties like font-weight or font-variant-caps.

📝 Syntax

The syntax for the font-feature-settings property involves specifying feature tag strings and their values:

element {
  font-feature-settings: "feature" value;
}

• feature — A four-character OpenType tag (e.g. "liga" for standard ligatures).
• value — A numeric value, usually 1 to enable or 0 to disable the feature.

Basic Example

p {
  font-feature-settings: "liga" 1, "smcp" 1;
}

Default Value

The default value of the font-feature-settings property is normal, which means that no specific OpenType features are applied, and the browser uses the font's default settings.

Syntax Rules

• Use quoted four-letter tags followed by a number: "liga" 1.
• Separate multiple features with commas.
• Use normal to reset to default feature behavior.
• The property is inherited.
• Effects depend on the active font-family supporting each feature.

💎 Property Values

Common OpenType feature tags

Examples Gallery

In this example, we enable standard ligatures and small caps in a paragraph — plus disabling ligatures, tabular numbers, and slashed zeros.

<style>
  p {
    font-family: Georgia, serif;
    font-feature-settings: "liga" 1, "smcp" 1;
  }
</style>

<p>
  The quick brown fox jumps over the lazy dog. Check ligatures and small caps.
</p>

.no-ligatures {
  font-feature-settings: "liga" 0;
}

.stats {
  font-variant-numeric: tabular-nums;
  /* equivalent high-level option */
  font-feature-settings: "tnum" 1;
}

code {
  font-family: ui-monospace, monospace;
  font-feature-settings: "zero" 1;
}

♿ Accessibility

• Prioritize readability over decorative ligatures or stylistic alternates in body text.
• Test small caps and figure styles at the sizes real users will read.
• Do not rely on typography alone to communicate meaning or data relationships.
• Ensure sufficient contrast remains when using alternate glyphs.
• Provide fallbacks when a feature is unsupported by the user's font.

💡 Best Practices