CSS font Property


Specify all the font properties in one declaration:

p.ex1 {
    font: 15px arial, sans-serif;

p.ex2 {
    font: italic bold 12px/30px Georgia, serif;

Try it yourself »

More "Try it Yourself" examples below.

Definition and Usage

The font shorthand property sets all the font properties in one declaration.

The properties that can be set, are (in order): "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 are missing, the default values will be inserted, if any.

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

Default value: The default value of all the font properties
Inherited: yes
Animatable: yes, see individual properties. Read about animatable Try it
Version: CSS1
JavaScript syntax:"italic small-caps bold 12px arial,sans-serif" Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the 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
font-style Specifies the font style. Default value is "normal". See font-style for possible values
font-variant Specifies the font variant. Default value is "normal". See font-variant for possible values
font-weight Specifies the font weight. Default value is "normal". See font-weight for possible values
font-size/line-height Specifies the font size and the line-height. Default value is "normal". See font-size and line-height for possible values
font-family Specifies the font family. Default value depends on the browser. See font-family for possible values
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. Read about initial
inherit Inherits this property from its parent element. Read about inherit


More Examples


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>

Try it yourself »

Related Pages

CSS tutorial: CSS Font

HTML DOM reference: font property