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>

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>

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; /* Chrome, Safari, Opera */
      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>

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.



Do you find this helpful?

Related articles