Widely availableSupported across all major browsers. Safe to use in production.
Typography Widely available

font-variant

The font-variant CSS property is a shorthand for font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-emoji, font-variant-ligatures, font-variant-numeric, and font-variant-position.

Typography

Overview

The font-variant CSS property is a shorthand for font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-emoji, font-variant-ligatures, font-variant-numeric, and font-variant-position.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
font-variant
1
12
1
1
18
1
CSS at-rule
font-variant
Non-standard
4
12
3.5
3.1
18
2
CSS property
css fonts shorthand

CSS Fonts Module Level 3 shorthand
52
79
34
9.1
52
9.3
greek accented characters

Greek accented characters
historical-forms
111
111
34
9.1
111
9.3
none
52
79
34
9
52
9
normal
1
12
1
1
18
1
sub
110
110
34
9.1
110
9.3
super
110
110
34
9.1
110
9.3
turkic is

`i` → `İ` and `ı` → `I`
31
12
14
8
31
8
uppercase eszett

`ß` → `SS`
Other
svg.global_attributes.font-variant

The font-variant attribute indicates whether the text is to be rendered using variations of the font's glyph.
1
12
1
1
18
1
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
  • Some operating systems may correctly omit accents in all-uppercase Greek text.
Notes 1 item(s)
Implementation note
  • Some operating systems may correctly omit accents in all-uppercase Greek text.
Notes 1 item(s)
Implementation note
  • Some operating systems may correctly omit accents in all-uppercase Greek text.
Notes 1 item(s)
Implementation note
  • Some operating systems may correctly omit accents in all-uppercase Greek text.
Notes 1 item(s)
Implementation note
  • Some operating systems may capitalize `ß` as `SS`.
Notes 1 item(s)
Implementation note
  • Some operating systems may capitalize `ß` as `SS`.
Notes 1 item(s)
Implementation note
  • Some operating systems may capitalize `ß` as `SS`.
Notes 1 item(s)
Implementation note
  • Some operating systems may capitalize `ß` as `SS`.

Syntax

CSS 
.elegant-text {
  font-variant: small-caps;
}
.number-table {
  font-variant: tabular-nums lining-nums;
}

Live demo

small-caps

CSS Small-caps demo.

PreviewFullscreen

tabular-nums

CSS Tabular-nums demo.

PreviewFullscreen

Normaltext

CSS Normaltext demo.

PreviewFullscreen

Use cases

  • Using font-variant

    The font-variant CSS property is a shorthand for font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-emoji, font-variant-ligatures, font-variant-numeric, and font-variant-position.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links

Powered by web-features