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.

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

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";

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

<!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>

See another example:

Example

<!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>

Another example of font animation. In this example the font-size,font-weight and line-height are animatable.

Example

<!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.





Related articles