Web/CSS/@font-face/font-variant

The font-variant CSS shorthand property allows you to set all the font variants for the fonts specified in the @font-face rule.

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

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

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

Values

normal: Specifies a normal font face; each of the longhand properties has an initial value of normal. Longhand properties of font-variant are: font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures, and font-variant-east-asian.
none: Sets the value of the font-variant-ligatures to none and the values of the other longhand property 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-alternates 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.
<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, ruby.

Formal definition

Related at-rule	`@font-face`
Initial value	`normal`
Computed value	as specified

Formal syntax

normal | none | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> || 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>) || [ small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps ] || <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero || <east-asian-variant-values> || <east-asian-width-values> || ruby ]where <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> = <custom-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

The following finds a local Open Sans font or imports it, and allows using the font for small-caps.

@font-face {
  font-family: "Open Sans";
  src: local("Open Sans") format("woff2"),
       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
  font-variant: small-caps;
}

Specifications

Specification	Status	Comment
CSS Fonts Module Level 4The definition of 'font-variant' in that specification.	Working Draft
CSS Fonts Module Level 3The definition of 'font-variant' in that specification.	Candidate Recommendation

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`font-variant`	Chrome Full support 4	Edge Full support 12	Firefox Full support 3.5	IE Full support 4	Opera Full support 10	Safari Full support 3.1	WebView Android Full support ≤37	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support 10.1	Safari iOS Full support 2	Samsung Internet Android Full support 1.0

Legend

Full support: Full support