CSS font-variant Property

CSS font-variant property specifies the variant of the font such as small-caps or normal.

In small-caps font, all lowercase letters converted to uppercase letters with smaller font size than the original text size.


The following table outline the usages and version history of this property.

Default value: normal
Applies to: All elements
Inherited: Yes
Version: CSS1
JavaScript Syntax: object.style.fontVariant = "small-caps"


Here is a syntax for the CSS font-variant property

font-style: normal | small-caps | initial | inherit;

Property Values

The following table describes the values of this property.

Value Description
normal default. Browser displays an normal font variant
small-caps Browser displays an small-caps font variant
initial Sets default value of this property
inherit Inherits this property from its parent element


The example below shows to sets font variant such as normal, small-caps values.

p.one {
  font-variant: normal;
p.two {
  font-variant: small-caps;

Run it...   »

Browser Compatibility

  • Google Chrome 1+
  • Mozilla Firefox 1+
  • Internet Explorer 4+
  • Opera 3.5+
  • Safari 1+

Note: Here details of browser compatibility with version number may be this is bug and not supported. But recommended to always use latest Web browser.