font-feature-settings
The font-feature-settings CSS property sets low-level OpenType feature tags for a font. When possible, use font-variant instead.
Overview
The font-feature-settings CSS property sets low-level OpenType feature tags for a font. When possible, use font-variant instead.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 48 | 15 | 34 | 9.1 | 48 | 9.3 | |
| CSS at-rule | ||||||
| The font-feature-settings CSS descriptor allows you to define the initial settings to use for the font defined by the @font-face at-rule. You can further use this descriptor to control typographic font features such as ligatures, small caps, and swashes, for the font defined by @font-face. The values for this descriptor are the same as the… | 140 | 140 | 34 | 10 | 140 | 10 |
| CSS property | ||||||
normal | 16 | 15 | 15 | 9.1 | 18 | 9.3 |
- Available with a vendor prefix: -webkit- (16)
- The ISO/IEC CD 14496-22 3rd edition suggests using the `ssty` feature to provide glyph variants more suitable for use in scripts (for example primes used as superscripts). Starting with Firefox 29, this is done automatically by the MathML rendering engine. The ISO/IEC CD 14496-22 3rd edition also suggests applying the `dtls` feature to letters when placing mathematical accents to get dotless forms (for example dotless i, j with a hat). Starting with Firefox 35, this is done automatically by the MathML rendering engine. You can override the default values determined by the MathML rendering engine with CSS.
- From Firefox 4 to Firefox 14 (inclusive), Firefox supported an older, slightly different syntax. See OpenType Font Feature support in Firefox 4.
- Available with a vendor prefix: -webkit- (129)
- From Firefox 129 the `-webkit-font-feature-settings` alias has been added to support sites that are still supporting the vendor prefix.
- Available with a vendor prefix: -moz- (15)
- Available with a vendor prefix: -webkit- (18)
- The ISO/IEC CD 14496-22 3rd edition suggests using the `ssty` feature to provide glyph variants more suitable for use in scripts (for example primes used as superscripts). Starting with Firefox 29, this is done automatically by the MathML rendering engine. The ISO/IEC CD 14496-22 3rd edition also suggests applying the `dtls` feature to letters when placing mathematical accents to get dotless forms (for example dotless i, j with a hat). Starting with Firefox 35, this is done automatically by the MathML rendering engine. You can override the default values determined by the MathML rendering engine with CSS.
- From Firefox 4 to Firefox 14 (inclusive), Firefox supported an older, slightly different syntax. See OpenType Font Feature support in Firefox 4.
- Available with a vendor prefix: -moz- (15)
Syntax
/* Enable ligatures */
.ligatures {
font-feature-settings: "liga" 1, "clig" 1;
}
/* Old-style numbers */
.old-style-nums {
font-feature-settings: "onum" 1;
}
/* Small caps */
.small-caps {
font-feature-settings: "smcp" 1;
}Live demo
Use cases
Using font-feature-settings
The font-feature-settings CSS property sets low-level OpenType feature tags for a font. When possible, use font-variant instead.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.
Related links
Powered by web-features