CSS font Property

Example

Set some font properties with the shorthand declaration:

p.a {
font: 15px Arial, sans-serif;
}

p.b {
font: italic small-caps bold 12px/30px Georgia, serif;
}

Definition and Usage

The font property is a shorthand property for:

• font-style
• font-variant
• font-weight
• font-size/line-height
• font-family

The font-size and font-family values are required. If one of the other values is missing, their default value are used.

Note: The line-height property sets the space between lines.

Default value:	The default value of the font properties
Inherited:	yes
Animatable:	yes, see individual properties.
Version:	CSS1
JavaScript syntax:	object.style.font="italic small-caps bold 12px arial,sans-serif"

• Inherited : "Inherited = yes" means that it can takes (inherit) it's value from it's parent element.
• object - object in javascript means the element on which font is applied.
• Animatable - "Animatable = yes" means that it can be animated with CSS @keyframes.

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
font	1.0	4.0	1.0	1.0	3.5

Note: See individual browser support for each value below.

CSS Syntax

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

Property/Value	Description	Demo
font-style	Specifies the font style. Default value is "normal"
font-variant	Specifies the font variant. Default value is "normal"
font-weight	Specifies the font weight. Default value is "normal"
font-size/line-height	Specifies the font size and the line-height. Default value is "normal"
font-family	Specifies the font family. Default value depends on the browser
caption	Uses the font that are used by captioned controls (like buttons, drop-downs, etc.)
icon	Uses the font that are used by icon labels
menu	Uses the fonts that are used by dropdown menus
message-box	Uses the fonts that are used by dialog boxes
small-caption	A smaller version of the caption font
status-bar	Uses the fonts that are used by the status bar
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

More Examples

Example

A demonstration of some of the other font property values.

<p style="font:caption">The browser font used in captioned controls.</p>
<p style="font:icon">The browser font used in icon labels.</p>
<p style="font:menu">The browser font used in dropdown menus.</p>
<p style="font:message-box">The browser font used in dialog boxes.</p>
<p style="font:small-caption">A smaller version of the caption font.</p>
<p style="font:status-bar">The browser font used in the status bar.</p>