Fonts
font-feature-settings
font-feature-settings turns OpenType features of a font, such as kerning or digit widths, on and off directly with four-letter tags. Use it for features the font-variant properties cannot express, or for glyphs specific to a font.
Syntax
normal | <feature-tag-value>#
<feature-tag-value> = <opentype-tag> [ <integer [0,∞]> | on | off ]?Preview
AVATAR ->
11:11 · 1/2
88:88 · 3/4
11:11 · 1/2
88:88 · 3/4
Presets
Drag the bottom-right corner to resize
Code
.box {
font-family: Inter, sans-serif;
font-size: 18px;
font-feature-settings: "tnum", "frac";
}Controls
font-feature-settings"tnum", "frac"
Turn off features that are on by default
"kern" offno kerning
"liga" offno ligatures such as fiThe sample font (Inter) has no glyphs for this, so the preview does not change
"calt" offno contextual alternates
Turn on features
"tnum"same-width digits
"frac"turn "1/2" into a fraction
"zero"slashed zeroThe sample font (Inter) has no glyphs for this, so the preview does not change
"ss01"stylistic set 1 glyphsThe sample font (Inter) has no glyphs for this, so the preview does not change
AVATAR ->
11:11 · 1/2
88:88 · 3/4
11:11 · 1/2
88:88 · 3/4
About
Writing the value
normal: the initial value. This property changes nothing. Features the font or browser turns on by default, such as kerning, stay as they are.- Name a feature with a four-letter tag in quotes, such as
"tnum". Tags are case-sensitive. - After the tag, write
on(1),off(0), or an integer of 0 or more. When left out, it ison. An integer of 2 or more picks which alternate glyph to use, for features that have several (such as"salt"or"cv01"). - List as many as you like, separated by commas. When the same tag appears twice, the later one wins.
Features you can pick here
"kern" off: no kerning (the adjustment that tightens pairs such as AV and To). The gaps between the letters of "AVATAR" in the preview widen."liga" off: no ligatures that join letters such as fi and fl. The sample font, Inter, has no ligatures, so the preview does not change."calt" off: turns off glyphs that change with the letters around them. In Inter, "->" goes back from a single arrow to a hyphen and ">"."tnum": makes all digits the same width. A time full of 1s and a time full of 8s become the same width."frac": turns digits around a slash, such as "1/2", into the shape of a single fraction."zero": puts a slash through 0 so it is easier to tell from O."ss01": uses stylistic set 1, a group of alternate glyphs the font defines. What changes depends on the font.
Features without a switch are read from the code too, and listed under "Other features in the code". The spec also allows four-character tags with spaces or symbols, but this page reads only the letter-and-digit tags real fonts use.
When to use it
Use it for glyphs specific to a font, such as stylistic sets and per-character variants, or for features that have no matching value in the font-variant properties yet.
Watch out
- For features the font-variant properties can express, such as
"tnum"andfont-variant-numeric: tabular-nums, the spec recommends using those instead. When both set the same feature, font-feature-settings wins. - It is inherited, but a value on a child element replaces the parent's value instead of combining with it. With
"kern" offon the parent and"tnum"on the child, kerning comes back in the child. - Features the font does not have do nothing. Which features a font has depends on the font, and even on where the same font comes from: the Inter this site loads from Google Fonts lacks
"zero"and"ss01", which the original Inter has. - Works in all major browsers.