X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

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.



Do you find this helpful?

Related articles