coderef

font-variant-numericBaseline · Widely available

The font-variant-numeric CSS property sets how numeric characters are displayed. For example, you can align columns of numbers or use zeroes that have a slash.

Supported in all major browsers for at least 30 months — safe to use without fallbacks. Baseline since Jan 15, 2020. Widely available since Jul 15, 2022.

Browser support

DesktopChrome
1–51Not supported
52+Supportedsince Jul 20, 2016
Current: 155
Edge
12–18Not supported
79+Supportedsince Jan 15, 2020
Current: 154
Firefox
1–33Not supported
34+Supportedsince Dec 1, 2014
Current: 157
Safari
1–9Not supported
9.1+Supportedsince Mar 21, 2016
Current: 27
MobileChrome Android
18–51Not supported
52+Supportedsince Jul 27, 2016
Current: 155
Firefox Android
4–33Not supported
34+Supportedsince Dec 1, 2014
Current: 157
Safari iOS
1–9Not supported
9.3+Supportedsince Mar 21, 2016
Current: 27

How to use

This feature is Baseline widely available — use it freely, no fallback needed.

Example

Full syntax and examples are on MDN: font-variant-numeric.

Feature detection

CSS · check before using
@supports (font-variant-numeric: initial) {
  /* styles that rely on font-variant-numeric */
}

/* or in JavaScript */
if (CSS.supports("font-variant-numeric", "initial")) {
  // use it
}

Sub-features

Support for each part of the feature (10). The overall table above shows when the whole feature works.

Sub-featureChromeEdgeFirefoxSafariChrome AndroidFirefox AndroidSafari iOS
font-variant-numeric5279349.152349.3
font-variant-numeric.diagonal-fractions5279349.152349.3
font-variant-numeric.lining-nums5279349.152349.3
font-variant-numeric.normal5279349.152349.3
font-variant-numeric.oldstyle-nums5279349.152349.3
font-variant-numeric.ordinal5279349.152349.3
font-variant-numeric.proportional-nums5279349.152349.3
font-variant-numeric.slashed-zero5279349.152349.3
font-variant-numeric.stacked-fractions5279349.152349.3
font-variant-numeric.tabular-nums5279349.152349.3