In order to access this site you need to enable JavaScript!

You are here: Reference > CSS > properties > font

font property

Browser support:

Specifies up to six separate font properties, in a shorthand form.

The font property allows you to specify what kind of letter is used for the visual representation of the element. You can change the style, weight, size, the font family, and more, but if you want to change the color of the text, you must use the color property.

Specifying more than one font-family is recommended, because different font family names are supported by different platforms. For details, see the page for the font-family property. These features can be set with six different style properties too, listed below. The use of separate properties is highly recommended for non-advanced authors for better controllability.

JavaScript page for this property: font. You can find other example(s) there.

Possible values:

One of the following values:

•

Values in this order (use the space character to separate them):

Any of the following values (use the space character to separate them, each value can be used only once):

•	<font-style>
•	<font-variant>
•	<font-weight>

possible but not necessary; left to personal choice

Values in this order (use the / character to separate them):

<font-size>

<line-height>

<font-family>

•

caption

•

icon

•

message-box

•

small-caption

•

status-bar

•

-moz-button

•

-moz-info

•

-moz-desktop

•

-moz-dialog

•

-moz-document

•

-moz-workspace

•

-moz-window

•

-moz-list

•

-moz-pull-down-menu

•

-moz-field

•

-webkit-control

•

-webkit-mini-control

•

-webkit-small-control

•

inherit

Description of values:

-moz-button

The font used in buttons.

-moz-desktop

The font used on the desktop.

-moz-dialog

The font used in dialogs.

-moz-document

The font used in documents.

-moz-field

The font used in fields.

-moz-info

The font used in info.

-moz-list

The font used in lists.

-moz-pull-down-menu

The font used in pull-down-menus.

-moz-window

The font used in windows.

-moz-workspace

The font used in workspaces.

-webkit-control

The font used in controls.

-webkit-mini-control

The font used in mini controls.

-webkit-small-control

The font used in small controls.

caption

The font used for objects that have captions.

font-family

Specifies the font face for text.

font-size

Specifies the font size of the text.

font-style

Specifies whether the style of the font is normal, italic or oblique.

font-variant

Specifies a variation of the specified or default font-family.

font-weight

Specifies the font weight of the text.

icon

The font used to icon labels.

inherit

Takes the value of this property from the computed style of the parent element.

line-height

Specifies the distance between lines of text in a block-level element.

The font used in menus.

message-box

The font used in dialog boxes.

small-caption

The font used in small controls.

status-bar

The font used in window status bars.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the font property:

<head>
    <style>
        .example {
            font: italic normal 600 medium/1.2em serif;
        }
    </style>
</head>
<body>
    <a class="example">font: italic normal 600 medium/1.2em serif</a>
</body>