CSS font attribute

Definition and Usage

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

Note:This property also has the sixth value: "line-height", which can set the line spacing.

Description

This shorthand property is used to set two or more aspects of the element's font in one go. Keywords such as icon can be used appropriately to set the element's font to match some aspect of the user's computer environment. Note that at least the font size and font family must be specified if these keywords are not used.

You can set the following properties in order:

You can omit one of the values, for example, font:100% verdana; is also allowed. Properties that are not set will use their default values.

See also:

CSS Tutorial:CSS Font

HTML DOM Reference Manual:font Property

Example

Set all font properties in a single declaration:

p.ex1
  {
  font:italic arial,sans-serif;
  }
p.ex2
  {
  font:italic bold 12px/20px arial,sans-serif;
  }

Try It Yourself

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 Value

Value Description
font-style Specifies the font style. See also:font-style Possible values.
font-variant Specifies the font variant. See also:font-variant Possible values.
font-weight Specifies the font weight. See also:font-weight Possible values.
font-size/line-height Specifies the font size and line height. See also:font-size and line-height Possible values.
font-family Specifies the font family. See also:font-family Possible values.
caption Defines the font used by title controls (such as buttons, drop-down lists, etc.).
icon Defines the font used by icon markers.
menu Defines the font used by drop-down lists.
message-box Defines the font used by dialog boxes.
small-caption The small version of the 'caption' font.
status-bar Defines the font used by the window status bar.

Technical Details

Default Value: not specified
Inheritance: yes
Version: CSS1
JavaScript Syntax: object.style.font="italic small-caps bold 12px arial,sans-serif"

TIY Instance

All font properties within a single declaration
This example demonstrates how to set font properties within a single declaration using shorthand properties.
Setting the paragraph font using the 'caption' value
This example demonstrates how to set the paragraph font using the 'caption' value.

Browser Support

The numbers in the table indicate the first browser version that fully supports this attribute.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5