OpenType features in CSS
The CSS3 Specification defines two ways of accessing OpenType features in CSS: high-level and low-level properties.
High-level properties are independent of font format and have semantic, human-readable names. The specification recommends authors to use these properties whenever possible – but not all browsers support them yet.
The low-level property font-feature-settings
is specific to OpenType fonts. It offers an easy way to access OpenType features directly using standard 4-letter tags. This property is supported by the latest versions of all major browsers.
The examples below use both the high-level and low-level CSS syntax, and include prefixed low-level syntax for older versions of Firefox and Webkit browsers.
- Oldstyle Figures
(onum)
- Lining Figures
(lnum)
- Tabular Figures
(tnum)
- Slashed Zero
(zero)
- Fractions
(frac)
- Superscript
(sups)
- Subscript
(subs)
- Ordinal
(ordn)
- Small Caps
(smcp)
- Small Caps from Capitals
(c2sc)
- Case-Sensitive Forms
(case)
- Standard Ligatures
(liga)
- Discretionary Ligatures
(dlig)
- Historical Ligatures
(hlig)
- Contextual Alternates
(calt)
- Swash
(swsh)
- Historical Forms
(hist)
- Stylistic Sets
(ssxx)
- Kerning
(kern)
- Localised Forms
(locl)
- Arabic
Oldstyle Figures (onum)
↑ back to index
Plan Grotesque
0123456789
0123456789
font-variant-numeric: oldstyle-nums; /* high-level property */
-moz-font-feature-settings: 'onum'; /* low-level (old Firefox) */
-webkit-font-feature-settings: 'onum'; /* low-level (old Webkit) */
font-feature-settings: 'onum' on; /* low-level (all new browsers) */
Lining Figures (lnum)
↑ back to index
Nara
0123456789
0123456789
font-variant-numeric: lining-nums; /* high-level property */
-moz-font-feature-settings: 'lnum'; /* low-level (old Firefox) */
-webkit-font-feature-settings: 'lnum'; /* low-level (old Webkit) */
font-feature-settings: 'lnum' on; /* low-level (all new browsers) */
Tabular Figures (tnum)
↑ back to index
Fedra Sans
0123456789
0123456789
font-variant-numeric: tabular-nums; /* high-level property */
-moz-font-feature-settings: 'tnum'; /* low-level (old Firefox) */
-webkit-font-feature-settings: 'tnum'; /* low-level (old Webkit) */
font-feature-settings: 'tnum' on; /* low-level (all new browsers) */
Slashed Zero (zero)
↑ back to index
Greta Display
0123456789
0123456789
font-variant-numeric: slashed-zero; /* high-level property */
-moz-font-feature-settings: 'zero'; /* low-level (old Firefox) */
-webkit-font-feature-settings: 'zero'; /* low-level (old Webkit) */
font-feature-settings: 'zero' on; /* low-level (all new browsers) */
Fractions (frac)
↑ back to index
Fedra Serif Display
1 1/2 h 3 98/100
1 1/2 h 3 98/100
font-variant-numeric: diagonal-fractions; /* high-level property */
-moz-font-feature-settings: 'frac'; /* low-level (old Firefox) */
-webkit-font-feature-settings: 'frac'; /* low-level (old Webkit) */
font-feature-settings: 'frac' on; /* low-level (all new browsers) */
Superscript (sups)
↑ back to index
Brioni Text
HO 0123456789
HO 0123456789
font-variant-position: super; /* high-level property */
-moz-font-feature-settings: 'sups'; /* low-level (old Firefox) */
-webkit-font-feature-settings: 'sups'; /* low-level (old Webkit) */
font-feature-settings: 'sups' on; /* low-level (all new browsers) */
Subscript (subs)
↑ back to index
Fedra Sans
HO 0123456789
HO 0123456789
font-variant-position: sub; /* high-level property */
-moz-font-feature-settings: 'subs'; /* low-level (old Firefox) */
-webkit-font-feature-settings: 'subs'; /* low-level (old Webkit) */
font-feature-settings: 'subs' on; /* low-level (all new browsers) */
Ordinals (ordn)
↑ back to index
Fedra Serif A
1st 17th 2a
1st 17th 2a
font-variant-numeric: ordinal; /* high-level property */
-moz-font-feature-settings: 'ordn'; /* low-level (old Firefox) */
-webkit-font-feature-settings: 'ordn'; /* low-level (old Webkit) */
font-feature-settings: 'ordn' on; /* low-level (all new browsers) */
Small Caps (smcp)
↑ back to index
Brioni Text
UNESCO Unicef
UNESCO Unicef
font-variant-caps: small-caps; /* high-level property */
-moz-font-feature-settings: 'smcp'; /* low-level (old Firefox) */
-webkit-font-feature-settings: 'smcp'; /* low-level (old Webkit) */
font-feature-settings: 'smcp' on; /* low-level (all new browsers) */
[signup]
Capitals to Small Caps (c2sc)
↑ back to index
Greta Display
UNESCO Unicef
UNESCO Unicef
font-variant-caps: all-small-caps; /* high-level property */
-moz-font-feature-settings: 'c2sc', 'smcp'; /* low-level (old Firefox) */
-webkit-font-feature-settings: 'c2sc', 'smcp'; /* low-level (old Webkit) */
font-feature-settings: 'c2sc' on, 'smcp' on; /* low-level (all new browsers) */
Case-sensitive Forms (case)
↑ back to index
Nara
{¿¡HO-HO—HO!?}
{¿¡HO-HO—HO!?}
text-transform: uppercase; /* high-level property */
-moz-font-feature-settings: 'case'; /* low-level (old Firefox) */
-webkit-font-feature-settings: 'case'; /* low-level (old Webkit) */
font-feature-settings: 'case' on; /* low-level (all new browsers) */
Standard Ligatures (liga)
↑ back to index
Fedra Sans
koffie influence
koffie influence
font-variant-ligatures: common-ligatures; /* high-level property */
-moz-font-feature-settings: 'liga'; /* low-level (old Firefox) */
-webkit-font-feature-settings: 'liga'; /* low-level (old Webkit) */
font-feature-settings: 'liga' on; /* low-level (all new browsers) */
Discretionary Ligatures (dlig)
↑ back to index
Irma Slab
HB HE OO UP
HB HE OO UP
font-variant-ligatures: discretionary-ligatures; /* high-level property */
-moz-font-feature-settings: 'dlig'; /* low-level (old Firefox) */
-webkit-font-feature-settings: 'dlig'; /* low-level (old Webkit) */
font-feature-settings: 'dlig' on; /* low-level (all new browsers) */
Historical Ligatures (hlig)
↑ back to index
Fedra Serif B
ſinful ſingular
ſinful ſingular
font-variant-ligatures: historical-ligatures; /* high-level property */
-moz-font-feature-settings: 'hlig'; /* low-level (old Firefox) */
-webkit-font-feature-settings: 'hlig'; /* low-level (old Webkit) */
font-feature-settings: 'hlig' on; /* low-level (all new browsers) */
[social]
Contextual Alternates (calt)
↑ back to index
Fedra Serif Display
ginger giggle
ginger giggle
font-variant-alternates: contextual; /* high-level property */
-moz-font-feature-settings: 'calt'; /* low-level (old Firefox) */
-webkit-font-feature-settings: 'calt'; /* low-level (old Webkit) */
font-feature-settings: 'calt' on; /* low-level (all new browsers) */
Swash (swsh)
↑ back to index
Fedra Serif A
Alpha Beta Quebec
Alpha Beta Quebec
-moz-font-feature-settings: 'swsh'; /* low-level (old Firefox) */
-webkit-font-feature-settings: 'swsh'; /* low-level (old Webkit) */
font-feature-settings: "swsh" on; /* low-level (all new browsers) */
Historical Forms (hist)
↑ back to index
Fedra Serif A paradise lost paradise lost
font-variant-alternates: historical-forms; /* high-level property */
-moz-font-feature-settings: 'hist'; /* low-level (old Firefox) */
-webkit-font-feature-settings: 'hist'; /* low-level (old Webkit) */
font-feature-settings: 'hist' on; /* low-level (all new browsers) */
Stylistic Sets 1-20 (ss**)
↑ back to index
Fedra Sans
nuggets fanfarre
nuggets fanfarre
-moz-font-feature-settings: 'ss01', 'ss02'; /* low-level (old Firefox) */
-webkit-font-feature-settings: 'ss01', 'ss02'; /* low-level (old Webkit) */
font-feature-settings: 'ss01' on, 'ss02' on; /* low-level (all new browsers) */
Kerning (kern
) ↑ back to index
Fedra Sans
AVATAR LT.
AVATAR LT.
font-kerning: normal; /* high-level property */
-moz-font-feature-settings: 'kern'; /* low-level (old Firefox) */
-webkit-font-feature-settings: 'kern'; /* low-level (old Webkit) */
font-feature-settings: "kern" on; /* low-level (all new browsers) */
Localised Forms (locl
) ↑ back to index
If a font contains a locl
feature, localized forms are activated automatically based on the language declared in the element’s lang
attribute.
Fedra Sans Pro
гпклдвзитжц
гпклдвзитжц
<p lang='ru'>гпклдвзитжц</p>
<p lang='bg'>гпклдвзитжц</p>
Arabic
Required ligatures (rlig)
Medial Forms (medi)
Initial Forms (init)
Isolated Forms (isol)
Final Forms (fina)
Mark (mark)
Mark-to-mark Positioning (mkmk)
All features required for arabic are activated automatically if the language is declared.
Fedra Arabic نص حكيم له سر قاطع وذو شأن عظيم مكتوب على ثوب أخضر ومغلف بجلد أزرق
<p dir='rtl' lang='ar'>
نص حكيم له سر قاطع وذو شأن عظيم مكتوب على ثوب أخضر ومغلف بجلد أزرق
</p>