font-variant

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

The font-variant CSS shorthand property allows you to set all the font variants for a font.

You can also set the <font-variant-css2> values of font-variant defined in CSS Level 2.1, (that is, normal or small-caps), by using the font shorthand.

Try it

Constituent properties

Syntax

css
font-variant: small-caps;
font-variant: common-ligatures small-caps;

/* Global values */
font-variant: inherit;
font-variant: initial;
font-variant: revert;
font-variant: revert-layer;
font-variant: unset;

Values

normal

Specifies a normal font face. Each longhand property has an initial value of normal.

none

Sets the value of the font-variant-ligatures as none and the values of the other longhand properties as normal, their initial value.

<common-lig-values>, <discretionary-lig-values>, <historical-lig-values>, <contextual-alt-values>

Specifies the keywords related to the font-variant-ligatures longhand property. The possible values are common-ligatures, no-common-ligatures, discretionary-ligatures, no-discretionary-ligatures, historical-ligatures, no-historical-ligatures, contextual, and no-contextual.

stylistic(), historical-forms, styleset(), character-variant(), swash(), ornaments(), annotation()

Specifies the keywords and functions related to the font-variant-ligatures longhand property.

small-caps, all-small-caps, petite-caps, all-petite-caps, unicase, titling-caps

Specifies the keywords and functions related to the font-variant-caps longhand property. The small-caps value is the only non-normal font variant valid within the font shorthand property.

<numeric-figure-values>, <numeric-spacing-values>, <numeric-fraction-values>, ordinal, slashed-zero

Specifies the keywords related to the font-variant-numeric longhand property. The possible values are lining-nums, oldstyle-nums, proportional-nums, tabular-nums, diagonal-fractions, stacked-fractions, ordinal, and slashed-zero.

<east-asian-variant-values>, <east-asian-width-values>, ruby

Specifies the keywords related to the font-variant-east-asian longhand property. The possible values are jis78, jis83, jis90, jis04, simplified, traditional, full-width, proportional-width, and ruby.

sub, super

Specifies the keywords and functions related to the font-variant-position longhand property.

text, emoji, unicode

Specifies the keywords and functions related to the font-variant-emoji longhand property.

Formal definition

Initial valuenormal
Applies toall elements and text. It also applies to ::first-letter and ::first-line.
Inheritedyes
Computed valueas specified
Animation typediscrete

Formal syntax

font-variant = 
normal |
none |
[ [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> ] || [ small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps ] || [ stylistic( <feature-value-name> ) || historical-forms || styleset( <feature-value-name># ) || character-variant( <feature-value-name># ) || swash( <feature-value-name> ) || ornaments( <feature-value-name> ) || annotation( <feature-value-name> ) ] || [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ] || [ <east-asian-variant-values> || <east-asian-width-values> || ruby ] || [ sub | super ] || [ text | emoji | unicode ] ]

<common-lig-values> =
common-ligatures |
no-common-ligatures

<discretionary-lig-values> =
discretionary-ligatures |
no-discretionary-ligatures

<historical-lig-values> =
historical-ligatures |
no-historical-ligatures

<contextual-alt-values> =
contextual |
no-contextual

<feature-value-name> =
<ident>

<numeric-figure-values> =
lining-nums |
oldstyle-nums

<numeric-spacing-values> =
proportional-nums |
tabular-nums

<numeric-fraction-values> =
diagonal-fractions |
stacked-fractions

<east-asian-variant-values> =
jis78 |
jis83 |
jis90 |
jis04 |
simplified |
traditional

<east-asian-width-values> =
full-width |
proportional-width

Examples

Setting the small-caps font variant

HTML

html
<p class="normal">Firefox rocks!</p>
<p class="small">Firefox rocks!</p>

CSS

css
p.normal {
  font-variant: normal;
}
p.small {
  font-variant: small-caps;
}

Result

Specifications

Specification
CSS Fonts Module Level 4
# font-variant-prop
Scalable Vector Graphics (SVG) 2
# FontVariantProperty

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
font-variant
CSS Fonts Module Level 3 shorthand
Greek accented characters
historical-forms
none
normal
sub
super
iİ and ıI
ßSS

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.

See also