Web/CSS/font-variant

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

You can also set the CSS Level 2 (Revision 1) values of font-variant, (that is, normal or small-caps), by using the font shorthand.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

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

Initial value	`normal`
Applies to	all elements. It also applies to `::first-letter` and `::first-line`.
Inherited	yes
Computed value	as specified
Animation type	discrete

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

HTML

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

CSS

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

Result

Specifications

Specification	Status	Comment
CSS Fonts Module Level 3The definition of 'font-variant' in that specification.	Candidate Recommendation	Made it a shorthand of the new `font-variant-*` properties.
CSS Level 2 (Revision 1)The definition of 'font-variant' in that specification.	Recommendation	No change
CSS Level 1The definition of 'font-variant' in that specification.	Recommendation	Initial definition

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 1	Edge Full support 12	Firefox Full support 1	IE Full support 4	Opera Full support 3.5	Safari Full support 1	WebView Android Full support 1	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support 11	Safari iOS Full support 1	Samsung Internet Android Full support 1.0
CSS Fonts Module Level 3 shorthand	Chrome Full support 52	Edge Full support 79	Firefox Full support 34 Full support 34 No support 33 — 34 Disabled' Disabled' From version 33 until version 34 (exclusive): this feature is behind the `layout.css.font-features.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	IE No support No	Opera Full support 39	Safari Full support 9.1	WebView Android Full support 52	Chrome Android Full support 52	Firefox Android Full support 34 Full support 34 No support 33 — 34 Disabled' Disabled' From version 33 until version 34 (exclusive): this feature is behind the `layout.css.font-features.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	Opera Android Full support 41	Safari iOS Full support 9.3	Samsung Internet Android Full support 6.0
Greek accented characters	Chrome No support No Notes' No support No Notes' Notes' Some operating systems may correctly omit accents in all-uppercase Greek text.	Edge No support No Notes' No support No Notes' Notes' Some operating systems may correctly omit accents in all-uppercase Greek text.	Firefox No support No Notes' No support No Notes' Notes' Some operating systems may correctly omit accents in all-uppercase Greek text.	IE No support No	Opera No support No Notes' No support No Notes' Notes' Some operating systems may correctly omit accents in all-uppercase Greek text.	Safari No support No	WebView Android No support No Notes' No support No Notes' Notes' Some operating systems may correctly omit accents in all-uppercase Greek.	Chrome Android No support No Notes' No support No Notes' Notes' Some operating systems may correctly omit accents in all-uppercase Greek text.	Firefox Android No support No Notes' No support No Notes' Notes' Some operating systems may correctly omit accents in all-uppercase Greek text.	Opera Android No support No Notes' No support No Notes' Notes' Some operating systems may correctly omit accents in all-uppercase Greek text.	Safari iOS No support No	Samsung Internet Android No support No Notes' No support No Notes' Notes' Some operating systems may correctly omit accents in all-uppercase Greek text.
`i` → `İ` and `ı` → `I`	Chrome Full support 31	Edge Full support 12	Firefox Full support 14	IE Full support 4	Opera Full support 18	Safari Full support 8	WebView Android Full support ≤37	Chrome Android Full support 31	Firefox Android Full support 14	Opera Android Full support 18	Safari iOS Full support 8	Samsung Internet Android Full support 2.0
`ß` → `SS`	Chrome No support No Notes' No support No Notes' Notes' Some operating systems may capitalize `ß` as `SS`.	Edge No support No Notes' No support No Notes' Notes' Some operating systems may capitalize `ß` as `SS`.	Firefox No support No Notes' No support No Notes' Notes' Some operating systems may capitalize `ß` as `SS`.	IE No support No	Opera No support No Notes' No support No Notes' Notes' Some operating systems may capitalize `ß` as `SS`.	Safari No support No	WebView Android No support No Notes' No support No Notes' Notes' Some operating systems may capitalize `ß` as `SS`.	Chrome Android No support No Notes' No support No Notes' Notes' Some operating systems may capitalize `ß` as `SS`.	Firefox Android No support No Notes' No support No Notes' Notes' Some operating systems may capitalize `ß` as `SS`.	Opera Android No support No Notes' No support No Notes' Notes' Some operating systems may capitalize `ß` as `SS`.	Safari iOS No support No	Samsung Internet Android No support No Notes' No support No Notes' Notes' Some operating systems may capitalize `ß` as `SS`.

Legend

Full support: Full support
No support: No support
See implementation notes.': See implementation notes.
User must explicitly enable this feature.': User must explicitly enable this feature.