This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

font-feature-settings

Summary

The font-feature-settings property gets or sets one or more values that specify glyph substitution (special font characters such as ligatures and figures) and positioning in fonts that include OpenType layout features.

Overview table

Initial value
normal
Applies to
All elements
Inherited
Yes
Media
visual
Computed value
As specified
Animatable
No
CSS Object Model Property
fontFeatureSettings
Percentages
N/A

Syntax

  • font-feature-settings: "OpenType feature tag" Indicator
  • font-feature-settings: normal

Values

normal
Default. No change in glyph substitution or positioning occurs.
“OpenType feature tag” Indicator
This property can take up to two separate parts in its value. The options are as follows:
  • OpenType feature tag: Comma-separated list of one or more OpenType layout feature tags (each with an optional toggle). See Notes for examples of correct syntax, plus a table of the most common feature tags and their definitions.
  • Indicator: 0 indicates that the feature is disabled. For boolean features, 1 indicates that feature is enabled. A value of ‘on’ is synonymous with 1 and ‘off’ is synonymous with 0. For non-boolean features, 1 or greater indicates the feature selection index.

Examples

A selection of examples showing some typical uses of the font-feater-settings property.

<p class="smallcaps">Small caps</p>

<p class="ligatures">Ligatures</p>

@font-face {
    font-family: 'myMinion';
    src: url('MinionPro-Regular.otf') format('opentype');
}

body {
    font-family: myMinion;
}

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

p.ligatures{ font-feature-settings: "liga" on; }

Notes

OpenType specification defines many advanced typographic features that can be implemented by font designers. For instance, you can define vertical positioning for a font, substitute glyph forms with ligatures, contextual alternates, stylistic alternates, or swashes, include a set of small caps, and more.
Each defined feature has a corresponding feature tag that identifies its function and effects. Font developers can also define their own features. A feature’s tag determines what the feature does and whether to implement it. The following table lists some of the most common feature tags and their definitions.
For the full list of OpenType layout features, see OpenType layout feature tag registry.

  • kern — Kerning
  • smcp — Small capitals
  • liga — Standard ligatures
  • dlig — Discretionary ligatures
  • ss01, ss02, ss03 … ss20 — Stylistic sets (font-specific)
  • swsh — Swash
  • tnum — Tabular figures
  • lnum — Lining figures
  • onum — Oldstyle figures

If you are unfamiliar with the font features listed above, the CSS Fonts Module Level 3 specification has good explanations and visual examples of each feature in Section 6, "Font feature properties." Be aware that, though the properties listed correspond to OpenType layout features that might be supported, the properties themselves (font-kerning, font-variant-*, and so on) are not supported.

Whenever possible, Web authors should use the font-variant property. This property has been designed to handle special cases where no other way to enable or access an OpenType font feature exists.

Related specifications

CSS Fonts Module Level 3
W3C Working Draft

See also

Related articles

Fonts

External resources

Related pages

Attributions