CSS font Property
Topic: CSS3 Properties ReferencePrev|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:
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.
- It is mandatory to define the values for
font-sizeand thefont-familyproperties. - The values for
font-style,font-variantandfont-weightproperties must be defined, before thefont-sizevalue, if any. - The value for
line-heightproperty must be defined immediately after thefont-sizeproperty, preceded by a mandatory "/" (forward slash). - The
font-familymust be the last value defined.
The example below shows the font property in action.
Example
Try this code »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.
 |
Basic Support—
|
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.
