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

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

More information

• Typotheque: OpenType features in web browsers — Tests
• W3C
• MDN
• Richard Rutter’s CSS3 Sandbox