1. css
  2. /properties
  3. /font-feature-settings

font-feature-settings

Definition

The font-feature-settings property in CSS is used to enable or disable specific typographic features of a font. These features can include ligatures, small caps, alternate characters, and other advanced typography options that are not available in standard fonts. The property takes a value that specifies the features to be enabled or disabled, using a combination of feature tags and values.

Examples

Enable ligatures for headings:

h1, h2, h3, h4, h5, h6 {
  font-feature-settings: "liga" 1;
}

Use alternate characters for a specific element:

blockquote {
  font-feature-settings: "swsh" 1;
}

Disable small caps for a paragraph:

p {
  font-feature-settings: "smcp" 0;
}

Values

ValueDescription
normalDisables all font features.
<feature-tag> <value>Enables a specific font feature with the given tag and value. The tag and value can be found in the font's OpenType specification or documentation.
inheritInherits the font feature settings from the element's parent.
initialSets the font feature settings to their default values.
unsetResets the font feature settings to their default values, or inherits them from the parent if no default value is specified.

Best Practices

  • Use font-feature-settings sparingly, as it can add complexity and reduce readability if used excessively.
  • Always test your font feature settings on different devices and browsers to ensure that they are supported and display correctly.
  • Use feature tags and values that are appropriate for the font and content, and consider the intended audience when choosing which features to enable or disable.
  • Include fallback fonts that do not require advanced typography features, in case the desired font is not available or the user's browser does not support the specified features.
  • Be aware that enabling certain font features, such as ligatures, may affect the spacing and layout of text, and may require additional adjustments to ensure a visually pleasing result.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes