CSS font Property

The font property is a shorthand property for the following properties:

You can set all the properties with the following order: 1. font-style, 2. font-variant, 3. font-weight, 4. font-size / line-height, 5. font-family. The line-height property is used for setting the space between lines.

It is required to define font-size and font-family properties' values. If one of the values is missed, its default value is used.

All the individual values of the font-size property that are not specified, will be set to their initial value.

Initial Value	Default values of the properties.
Applies to	All elements. It also applies to ::first-letter and ::first-line.
Inherited	Yes.
Animatable	Yes. Font-size, font-weight, font-stretch, and line-height are animatable.
Version	CSS1
DOM Syntax	Object.style.font = "talic normal bold 1em/140% "Lucida Grande", sans-serif";

Font as a shorthand property

While using this shorthand property you should know some important things about it:

Mandatory values

The "font-size" and "font-family" values are considered to be mandatory ones. The whole declaration will be ignored if one of these values are absent.

Optional values

The other five values are optional. In case of using one of these values, take into account that they must come before the "font-size" value in the declaration, otherwise they will be ignored.

The font and font-stretch properties

The font-stretch property is new in CSS3, and if you use it in an older browser, the whole line will be ignored.

The inheritance for optional values

If you omit the optional values they will not inherit values from their parent element. They will be restored to their initial state.

Keywords that define system fonts

The following values of the font property can be used as keywords:

caption
icon
menu
message-box
small-caption
status-bar

They set the font to the one that is used on the operating system of the user for that specific category. For example, if you specify the “menu” value, the font will be set on that element for using the same font that is used on the operating system for dropdown menus and menu lists.

These keyword-values can only be used with the font shorthand property.

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;

Example of the font property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .font {
        font: italic normal bold 1em/140% "Lucida Grande", sans-serif;
      }
    </style>
  </head>
  <body>
    <h2>Font property example</h2>
    <p>This is some normal paragraph.</p>
    <p class="font">This is a paragraph with specified font value.</p>
  </body>
</html>

Try it Yourself »

Result

Example of the font property defined with italic fonts:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .font1 {
        font: italic small-caps bold 20px/1 cursive;
      }
      .font2 {
        font: italic 1.2em "Fira Sans", serif;
      }
      .font3 {
        font: 1.2em "Fira Sans", sans-serif;
      }
      .font4 {
        font: small-caps bold 28px/1.5 sans-serif;
      }
      .font5 {
        font: caption;
        /* font: menu | icon | message-box | small-caption | status-bar;*/
      }
    </style>
  </head>
  <body>
    <h2>Font property example</h2>
    <p class="font1">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p class="font2">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p class="font3">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p class="font4">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p class="font5">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </body>
</html>

Try it Yourself »

Example of the font property, where the font-size, font-weight and line-height are animatable:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .element {
        border: 2px solid #666;
        width: 350px;
        height: 150px;
        font: 20px "Fira Sans", sans-serif;
        -webkit-animation: element 4s infinite;
        animation: element 4s infinite;
      }
      /* Chrome, Safari, Opera */
      @-webkit-keyframes element {
        50% {
          font: 50px bold;
        }
      }
      /* Standard syntax */
      @keyframes element {
        50% {
          font: 50px bold;
        }
      }
    </style>
  </head>
  <body>
    <h2>Font animation example</h2>
    <div class="element">
      <p>Some paragraph</p>
    </div>
  </body>
</html>

Try it Yourself »

Values

Value	Description
font-style	Defines the font style. Its default value is normal.
font-variant	Defines the font variant. Its default value is normal.
font-weight	Defines the font weight. Its default value is normal.
font-size/line-height	Defines the font size and the line height. Its default value is normal.
font-family	Defines the font family. Its default value depends on the browser.
caption	Font which is used for captioned controls (e.g., buttons, drop-downs).
icon	Font which is used to label icons.
menu	Font which is used in menus (e.g., dropdown menus and menu lists).
message-box	Font which is used in dialog boxes.
small-caption	Font which is used for labeling small controls.
status-bar	Font which is used in window status bars.
initial	Makes the property use its default value.
inherit	Inherits the property from its parents element.