font-feature-settings

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;
}

See the Pen Ligatures by CSS-Tricks (@css-tricks) on CodePen.

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

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

See the Pen Small caps by CSS-Tricks (@css-tricks) on CodePen.

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

ChromeOperaFirefoxIEEdgeSafari
21*15*15*10129.1

Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
9.337No4.4*5752

Safari doesn’t currently support font-feature-settings but it is in the most recent version of WebKit Nightly, so expect support in Safari and iOS sometime soon.

More information

This comment thread is closed. If you have important information to share, please contact us.
icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag