Web/CSS/font-feature-settings

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;

font-variantfont-variant-ligaturesfont-variant-capsfont-variant-east-asianfont-variant-alternatesfont-variant-numericfont-variant-positionfont-feature-settingsfont-feature-settings

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+20 – U+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 3The definition of 'font-feature-settings' in that specification.	Candidate Recommendation	Initial definition

Browser compatibility

Update compatibility data on GitHub

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