CSS font

The CSS font property is used to define custom/required font to provide excellent readers experience for our website. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      body{font: 1.2em/1.6 "Lucida Console", "Courier New", monospace;}
   </style>
</head>
<body>

   <h2>The font Property</h2>
   <p>This is an example of font property in CSS.</p>
   <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque repellat
      dolor asperiores saepe provident rem iste ratione tenetur laudantium possimus
      incidunt eum architecto sequi expedita animi, iure inventore voluptatem vero.
   </p>
   
</body>
</html>

Output

The font Property

This is an example of font property in CSS.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque repellat dolor asperiores saepe provident rem iste ratione tenetur laudantium possimus incidunt eum architecto sequi expedita animi, iure inventore voluptatem vero.

In above example, from the following CSS code:

font: 1.2em/1.6 "Lucida Console", "Courier New", monospace;

The 1.2em/1.6 refers to font-size/line-height. That is, 1.2em is the font-size, whereas 1.6 is the line-height. And "Lucida Console", "Courier New", monospace refers to font-family.

CSS font Syntax

The syntax of font property in CSS, is:

font: font-style font-variant font-weight font-size/line-height font-family|menu|message-box|caption|small-caption|status-bar|icon|initial|inherit;

Important - From all, the font-size and font-family are the two, that are required.

The font property can also be called/used as shorthand of these properties:

font-style - style the font of text
font-variant - define whether the text should be in small-caps or not
font-weight - make the text thicker or thinner
font-size/line-height - define the size of a font/used to define the height of all lines of selected element
font-family - define the font-family for the text, to make the text looks/appears more interactive

Here are the list of keywords that can also be used to define the font property:

menu - used to define font for the menu (drop-downs)
message-box - used to define font for the dialog boxes
caption - used to define font for the captioned text
small-caption - used to define smaller font for the captioned text
status-bar - used to define font for the status bar
icon - used to define font for the icon labels
initial - used to use the default value
inherit - used to use the value inherited by the parent element

CSS font Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .a{font: menu;}
      .b{font: message-box;}
      .c{font: caption;}
      .d{font: small-caption;}
      .e{font: status-bar;}
      .f{font: icon;}
   </style>
</head>
<body>

   <h2>font: menu</h2>
   <div class="a">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
   </div>

   <h2>font: message-box</h2>
   <div class="b">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
   </div>

   <h2>font: caption</h2>
   <div class="c">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
   </div>

   <h2>font: small-caption</h2>
   <div class="d">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
   </div>

   <h2>font: status-bar</h2>
   <div class="e">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
   </div>

   <h2>font: icon</h2>
   <div class="f">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
   </div>
   
</body>
</html>

Output