CSS font Property

CSS font property is a shorthand property for setting all the font related properties in one statement i.e. font-style, font-variant, font-weight, font-size, line-height, and font-family.

CSS font property required font-size and font-family values. If any other values are missing, their default value are used.

Following properties can be sets,

Usages

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

Default value: See individual properties
Applies to: All elements
Inherited: Yes
Version: CSS1
JavaScript Syntax: object.style.font = "oblique normal bold 14px arial,sans-serif"

Syntax

Here is a syntax for the CSS font property

font: font-style font-variant font-weight font-size/line-height font-family | 
      caption | icon | menu | message-box | small-caption | status-bar | initial | inherit;

Property Values

The following table describes the values of this property.

Value Description
font-style Specifies the style of a font. It can be one of the following:
  • normal
  • italic
  • oblique
Default value is normal
font-variant Specifies the variant of a font. It can be one of the following:
  • normal
  • small-caps
  • inherit
Default value is normal
font-weight Specifies the weight (boldness) of a font. It can be one of the following:
  • normal
  • bold
  • bolder
  • bold
  • lighter
  • 100, 200, 300, 400, 500, 600, 700, 800, 900
Default value is normal
font-size Specifies the size of the font. It can be one of the following:
  • length
  • percentage
  • smaller, larger
  • xx-small, x-small, small, medium, large, x-large, xx-large
Default value is medium
line-height Specifies the line height. It can be one of the following:
  • normal
  • number
  • percentage
Default value is normal
font-family Specifies the list of font family names. It can be one of the following:
  • family-name (Arial, Times, Helvetica etc)
  • generic-family (serif, sans-serif, cursive, fantasy, monospace)
  • caption
  • icon
  • menu
  • message-box
  • small-caption
  • status-bar
Default value is depend on browser
initial Sets default value of this property
inherit Inherits this property from its parent element.

Examples

The example below shows to sets border width, style, color values.

h1 {
  font: italic small-caps bold 34px Georgia;
}
p.first {
  font: italic small-caps bold 18px Helvetica, sans-serif;
}
p.second {
  font: 18px Arial, Georgia, sans-serif;
}
p.third {
  font: bold 1.2em 'Arial';
}

Run it...   »

Browser Compatibility

  • Google Chrome 1+
  • Mozilla Firefox 1+
  • Internet Explorer 4+
  • Opera 4+
  • 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.