CSS font-feature-settings Property

Description

The font-feature-settings CSS property is used to control advanced typographic features in web fonts. It allows web developers to enable or disable specific OpenType font features, such as ligatures, kerning, or stylistic alternates, to fine-tune the appearance of text on a webpage. By adjusting these features, designers can achieve precise control over the visual presentation of text, enhancing readability and aesthetics. This property is particularly valuable when working with custom fonts that have extensive typographic options, providing a way to tailor the typography to match the desired design aesthetic.

Initial value

normal

Applies to

All elements

Inherited

Yes

Computed value

As specified

Animatable

No

JavaScript syntax

object.style.fontFeatureSettings

Interactive Demo

font-feature-settings: normal;

font-feature-settings: "liga" 0;

font-feature-settings: "tnum";

font-feature-settings: "smcp", "zero";

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

.class {
   font-feature-settings: "smcp", "swsh" 2;
}

Browser Support

The following table will show you the current browser support for the CSS font-feature-settings property.

Desktop
15	48	34	35	9.1

Tablets / Mobile
48	34	35	9.3	5	4.4

Last updated by CSSPortal on: 1st January 2024