CSS font Property

The font property specifies several font styling settings.

These include font, color, height, style, weight, and more.

Example

#

Text with a custom font.

Text with a custom style, size, and font family.

<p style="font: italic 20px Georgia, serif;">
  Text with a custom style, size, and font family.
</p>

Using font

The font property is a shorthand for these properties:

Two of these are required: font-size and font-family.

The default for most of these properties is normal.

Multiple font family names can be specified. The later ones as fallback.

Fallbacks are applied when the browser does not support the first font.

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;

Values

#

Value Description
font-style Font style. Default is normal.
font-variant Font variant. Default is normal.
font-weight Font weight. Default is normal.
font-size Font size and line-height. Default is "normal"
font-family Font family. Default is browser dependent.
inherit Inherits the value from its parent element.
Built in browser fonts
caption Built-in browser font used for captioned controls, such as, buttons.
icon Built-in browser font used for icon labels.
menu Built-in browser font used for dropdown menus.
message-box Built-in browser fonts used for dialog boxes.
small-caption Built-in browser fonts used for small control labels.
status-bar Built-in browser font used in window status bar.
initial Sets the value to its default value.

More Examples

Click the buttons to see the different font values.

Font: caption

<style>
  .font-example {
    font: caption;
  }
</style>

<p class="font-example">Font: caption</p>

Browser support

This table shows when font support started for each browser.

Chrome
1.0 Dec 2008
Firefox
1.0 Nov 2004
IE/Edge
4.0 Sep 1997
Opera
3.5 Nov 1998
Safari
1.0 Jun 2003

You may also like

Guides