font-feature-settings

Avatar of Robin Rendle
Robin Rendle on (Updated on )

This property gives us control over advanced typographic settings such as small caps, ligatures, and swashes. To activate them you must declare which value you need in quotes and then followed by either 1 or on to enable. Alternatively, you can disable them with either 0 or off:

.element {  
  /* these two values do the same thing */
  font-feature-settings: "liga" 1;
  font-feature-settings: "liga1" on;
}

Many other values, besides standard ligatures are supported by the font-feature-settings property, including small caps:

.element {
  font-feature-settings: "smcp" 1; 
}

Values

This is a list of every value that is supported by font-feature-settings, but make sure to check the web font that you’re using supports these values too before trying them:

  • liga: standard ligatures
  • dlig: discretionary ligatures
  • onum: old style figures
  • lnum: lining figures
  • tnum: tabular figures
  • zero: slashed zero
  • frac: fractions
  • sups: superscript
  • subs: subscript
  • smcp: small caps
  • c2sc: small capitals from capitals
  • case: case-sensitive forms
  • hlig: historical ligatures
  • calt: contextual alternates
  • swsh: swashes
  • hist: historical forms
  • ss**: stylistic sets
  • kern: kerning
  • locl: localized forms
  • rlig: required ligatures
  • medi: medial forms
  • init: initial forms
  • isol: isolated forms
  • fina: final forms
  • mark: mark
  • mkmk mark-to-mark positioning

Combining multiple settings

To add multiple features you need to follow one value by another in a comma separated list, like so:

.element {
  font-feature-settings:"smcp" 1, "onum" 1;
}

Prefixes

To get the best support across the browser spectrum, make sure to use these prefixes:

.element {
  -webkit-font-feature-settings: "smcp" 1;
  -moz-font-feature-settings:    "smcp" 1;
  -ms-font-feature-settings:     "smcp" 1;
  font-feature-settings:         "smcp" 1;
}

Browser support

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

ChromeFirefoxIEEdgeSafari
21*15*10129.1

Mobile / Tablet

Android ChromeAndroid FirefoxAndroidiOS Safari
1231244.4*9.3

More information