CSS Portal

CSS font-feature-settings Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The font-feature-settings property lets you enable, disable, or fine-tune typographic features built into fonts at a low level. It is a direct way to instruct the text shaping engine to apply OpenType or similar font-provided capabilities—things like advanced ligature behavior, alternate glyph sets, number styles, or other substitution and positioning features—so the font can swap or adjust glyphs beyond basic character mapping. Because it operates at the feature-tag level, it gives designers unmatched precision when they need specific typographic results that higher-level APIs do not expose.

In practice font-feature-settings is often used when the available higher-level properties cannot express a particular combination or nuance. For example, a design may require turning off discretionary ligatures but keeping standard ones, or selecting a single stylistic alternate from a font that contains many; that granular control is exactly where this property is useful. For more semantic or broadly applicable options, you will typically prefer the higher-level font-variant interface, which maps common typographic intentions to the appropriate font features; reserve font-feature-settings for cases where those abstractions fall short.

Keep in mind that the property only has effect when the chosen font actually implements the requested features and when the rendering engine supports applying them. It interacts with how you select fonts (for example via font-family) and with variable-font axes controlled by font-variation-settings, so the final appearance depends on the combination of font file capabilities and other font-related CSS. Because it can change the glyphs used and their metrics, using it can influence text metrics, line breaks, and layout, so test in context and prefer semantic approaches where possible.

Definition

Initial value
normal
Applies to
All elements
Inherited
Yes
Computed value
As specified
Animatable
No
JavaScript syntax
object.style.fontFeatureSettings

Interactive Demo

Difficult waffles

0O
3.14
2.71

Syntax

font-feature-settings: normal | <feature-tag-value> # 

Values

  • normalNo change in glyph selection or positioning occurs due to this property.
  • <feature-tag-value> = <string> [ <integer> | on | off ]?The <string> is a case-sensitive OpenType feature tag. As specified in the OpenType specification, feature tags contain four ASCII characters. An <integer> value must be 0 or greater. A value of 0 indicates that the feature is disabled. For boolean features, a value of 1 enables the feature.

Example

<div class="wrapper">
<h2>font-feature-settings - examples</h2>

<p class="sample default">Default: office official fiat ffl 123456</p>

<p class="sample liga">With ligatures: office official fiat ffl</p>

<p class="sample default">Default numbers: 1234567890</p>

<p class="sample tnum">Tabular numbers (tnum): 1234567890</p>
</div>
.wrapper {
  font-family: Georgia, "Times New Roman", serif;
  padding: 20px;
  max-width: 720px;
}

h2 {
  margin: 0 0 12px 0;
  font-size: 20px;
}

.sample {
  font-size: 28px;
  margin: 8px 0;
  padding: 10px;
  border-radius: 6px;
}

.sample.default {
  background: #ffffff;
  border: 1px solid #dddddd;
}

.sample.liga {
  background: #f7fbff;
  border: 1px solid #cfe6ff;
  font-feature-settings: "liga" 1, "dlig" 1;
}

.sample.tnum {
  background: #fffaf0;
  border: 1px solid #ffe8b3;
  font-feature-settings: "tnum" 1;
}

Browser Support

The following information will show you the current browser support for the CSS font-feature-settings property. Hover over a browser icon to see the version that first introduced support for this CSS property.

This property is supported by all modern browsers.
Desktop
Chrome
Edge
Firefox
Opera
Safari
Tablets & Mobile
Chrome Android
Firefox Android
Opera Android
Safari iOS
Samsung Internet
Android WebView
-

Last updated by CSSPortal on: 1st January 2026

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!