W3cubDocs

/CSS

font-feature-settings

The font-feature-settings CSS property controls advanced typographic features in OpenType fonts.

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 the U+20U+7E codepoint range, the whole property is invalid.
The value is a positive integer. The two keywords on and off are synonyms for 1 and 0 respectively. If no value is set, the default is 1. 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 compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
font-feature-settings 48
48
16
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
15 34
34
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.
15
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
From Firefox 4 to Firefox 14 (inclusive), Firefox supported an older, slightly different syntax. See OpenType Font Feature support in Firefox 4.
10 35
35
15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
9.1
9.1
4 — 6
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
font-feature-settings 4.4 48 34
34
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.
15
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
From Firefox 4 to Firefox 14 (inclusive), Firefox supported an older, slightly different syntax. See OpenType Font Feature support in Firefox 4.
35
35
14
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
9.3
9.3
3.2 — 6.1
5.0

See also

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings