Font

What is it?

CSS font property is a shorthand property which we can set all the font properties (CSS font-style property , CSS font-variant property , CSS font-weight property, CSS font-size property , CSS line-height property , CSS font-family property ) at once.

You can set all the properties with this 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.

CSS Syntax

font: font-style font-variant font-weight font-size/line-height font-family ;

Let's see an example:

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

   </body>
</html>

Here the result is:



Property Values

Value Descriptions
font-style It defines the font style. Its default value is normal.
font-variant It defines the font variant. Its default value is normal.
font-weight It defines the font weight. Its default value is normal.
font-size/line-height It defines the font size and the line height. Its default value is normal.
font-family It defines the font family. Its default value depends on the browser.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.