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 property is a shorthand for the font-style, font-variant, font-weight, font-size/line-height, and the font-family properties.

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 all the font properties
Inherited: yes
Animatable: yes, see individual propertiesRead about animatable – Try it
Version: CSS1
JavaScript syntax: object.style.font=”italic small-caps bold 12px arial,sans-serif” Try it
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”
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. 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