The font-feature-settings
CSS property controls advanced typographic features in OpenType fonts.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Syntax
/* Use the default settings */ font-feature-settings: normal; /* Set values for OpenType feature tags */ font-feature-settings: "smcp"; font-feature-settings: "smcp" on; font-feature-settings: "swsh" 2; font-feature-settings: "smcp", "swsh" 2; /* Global values */ font-feature-settings: inherit; font-feature-settings: initial; font-feature-settings: unset;Whenever possible, Web authors should instead use the
font-variant
shorthand property or an associated longhand property such as font-variant-ligatures
, font-variant-caps
, font-variant-east-asian
, font-variant-alternates
, font-variant-numeric
or font-variant-position
.These lead to more effective, predictable, understandable results than
font-feature-settings
, which is a low-level feature designed to handle special cases where no other way exists to enable or access an OpenType font feature. In particular, font-feature-settings
shouldn't be used to enable small caps.
Values
normal
- Text is laid out using default settings.
<feature-tag-value>
- When rendering text, the list of OpenType feature tag value is passed to the text layout engine to enable or disable font features. The tag is always a
<string>
of 4 ASCII characters. If it has more or less characters, or if it contains characters outside theU+20
–U+7E
codepoint range, the whole property is invalid.
The value is a positive integer. The two keywordson
andoff
are synonyms for1
and0
respectively. If no value is set, the default is1
. For non-Boolean OpenType features (e.g. stylistic alternates), the value implies a particular glyph to be selected; for Boolean values, it is a switch.
Formal definition
Initial value | normal |
---|---|
Applies to | all elements. It also applies to ::first-letter and ::first-line . |
Inherited | yes |
Computed value | as specified |
Animation type | discrete |
Formal syntax
normal | <feature-tag-value>#where
<feature-tag-value> = <string> [ <integer> | on | off ]?
Examples
Enabling various font features
/* use small-cap alternate glyphs */ .smallcaps { font-feature-settings: "smcp" on; } /* convert both upper and lowercase to small caps (affects punctuation also) */ .allsmallcaps { font-feature-settings: "c2sc", "smcp"; } /* use zeros with a slash through them to differentiate from "O" */ .nicezero { font-feature-settings: "zero"; } /* enable historical forms */ .hist { font-feature-settings: "hist"; } /* disable common ligatures, usually on by default */ .noligs { font-feature-settings: "liga" 0; } /* enable tabular (monospaced) figures */ td.tabular { font-feature-settings: "tnum"; } /* enable automatic fractions */ .fractions { font-feature-settings: "frac"; } /* use the second available swash character */ .swash { font-feature-settings: "swsh" 2; } /* enable stylistic set 7 */ .fancystyle { font-family: Gabriola; /* available on Windows 7, and on Mac OS */ font-feature-settings: "ss07"; }
Specifications
Specification | Status | Comment |
---|---|---|
CSS Fonts Module Level 3 The definition of 'font-feature-settings' in that specification. |
Candidate Recommendation | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
font-feature-settings | Chrome
Full support
48
| Edge Full support 15 | Firefox
Full support
34
| IE Full support 10 | Opera
Full support
35
| Safari
Full support
9.1
| WebView Android Full support 4.4 | Chrome Android Full support 48 | Firefox Android
Full support
34
| Opera Android
Full support
35
| Safari iOS
Full support
9.3
| Samsung Internet Android Full support 5.0 |
Legend
- Full support
- Full support
- See implementation notes.
- See implementation notes.
- Requires a vendor prefix or different name for use.
- Requires a vendor prefix or different name for use.
See also
font-display
font-family
font-stretch
font-style
font-weight
font-variant
font-variation-settings
src
unicode-range
- OpenType Feature Tags list
- Using the whole font
(Note: The-moz
syntax is the old one. On Gecko, use the-ms
syntax but with-moz
.)