CSS PROPERTIES
Expand All|Collapse All
CSS AT-RULES
SPONSORED LINKS

CSS font Property

Topic: CSS3 Properties Reference« Prev|Next »

Description

The font CSS property sets the style, variant, boldness, size/line-height, and the font family for an element's text content. It is a shorthand property for setting the individual font properties i.e. font-style, font-variant, font-weight, font-size, line-height and font-family in a single declaration.

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

Default value: See individual properties
Applies to: All elements
Inherited: Yes
Animatable: Yes, as some of the properties of the shorthand are animatable. See animatable properties.
Version: CSS 1, 2, 3

Syntax

The syntax of the property is given with:

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

There are some conditions which must be fulfilled when using the font shorthand property. If these conditions are not met, the property is invalid and is entirely ignored.

The example below shows the font property in action.

  • h1 {
  •     font: bold 2.5em "Times New Roman", Times, serif;
  • }
  • p {
  •     font: normal 1.2em Arial, Helvetica, sans-serif;
  • }

Property Values

The following table describes the values of this property.

Value Description
font-style Sets the font style.
font-variant Sets the font variant.
font-weight Sets the font weight.
font-size Sets the font size.
line-height Sets the line height.
font-family Specifies the font family.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element font property.
And the following values refer to system fonts:
caption The font used for captioned controls (e.g., buttons, drop-downs, etc.).
icon The font used to label icons.
menu The font used in menus (e.g., dropdown menus and menu lists).
message-box The font used in dialog boxes.
small-caption The font used for labeling small controls.
status-bar The font used in window status bars.

Browser Compatibility

The font property is supported in all major modern browsers.

Browsers Icon

Basic Support—

  • Firefox 1+
  • Google Chrome 1+
  • Internet Explorer 3+
  • Apple Safari 1+
  • Opera 3.5+

Further Reading

See tutorial on: CSS Fonts, CSS Text.

Related properties and at-rules: font-style, font-variant, font-weight, font-size, line-height, font-family, @font-face.

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.