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

font-variant: normal;

font-variant: no-common-ligatures proportional-nums;

font-variant: common-ligatures tabular-nums;

font-variant: small-caps slashed-zero;

<section id="default-example"> <div id="example-element"> <p>Difficult waffles</p> <table> <tbody> <tr> <td><span class="tabular">0O</span></td> </tr> <tr> <td><span class="tabular">3.14</span></td> </tr> <tr> <td><span class="tabular">2.71</span></td> </tr> </tbody> </table> </div> </section>

@font-face { font-family: "Fira Sans"; src: local("FiraSans-Regular"), url("/shared-assets/fonts/FiraSans-Regular.woff2") format("woff2"); font-weight: normal; font-style: normal; } section { font-family: "Fira Sans", sans-serif; margin-top: 10px; font-size: 1.5em; } #example-element table { margin-left: auto; margin-right: auto; } .tabular { border: 1px solid; }

Constituent properties

This property is a shorthand for the following CSS 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 value	`normal`
Applies to	all elements and text. It also applies to `::first-letter` and `::first-line`.
Inherited	yes
Computed value	as specified
Animation type	discrete

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

Help improve MDN

Learn how to contribute

This page was last modified on ⁨Nov 18, 2025⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content