CSS font-family

The CSS font-family property is used to define the font family for the text, to make the text looks/appears more interactive. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      h2{border: 2px solid chocolate; padding: 10px;}
      .one{font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;}
      .two{font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}
      .three{font-family: 'Times New Roman', Times, serif;}
      .four{font-family: Arial, Helvetica, sans-serif;}
      .five{font-family: 'Courier New', Courier, monospace;}
      .six{font-family: Verdana, Geneva, Tahoma, sans-serif;}
   </style>
</head>
<body>
   
   <h2 class="one">font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif</h2>
   <h2 class="two">font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif</h2>
   <h2 class="three">font-family: 'Times New Roman', Times, serif</h2>
   <h2 class="four">font-family: Arial, Helvetica, sans-serif</h2>
   <h2 class="five">font-family: 'Courier New', Courier, monospace</h2>
   <h2 class="six">font-family: Verdana, Geneva, Tahoma, sans-serif</h2>
   
</body>
</html>

Output

font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif

font-family: 'Times New Roman', Times, serif

font-family: Arial, Helvetica, sans-serif

font-family: 'Courier New', Courier, monospace

font-family: Verdana, Geneva, Tahoma, sans-serif

A font-family such as Courier New, Times New Roman etc. has a set of multiple fonts that obviously has a common design.

Important - Font family whose name contains one or multiple whitespace(s) must be quoted. For example: "Gill Sans"

Note - We can define multiple font families to the font-family property, separated by comma. The first font family will get apply, if browser supports. And if browser does not supports the first font family, then the second font family will get apply. If browser does not supports the second font family, then the third font family will get apply, and so on.

Types of font-family Names

family-name - It is the name of font family such as Times, "Comic Sans MS", "Gill Sans" etc.
generic-family - The generic-family names are keywords, used to apply the style when no fonts are available. For example: serif, sans-serif, cursive, fantasy, and monospace

Note - The generic-family must be included as the last item(s) in the list of font-family names. Also, the generic-family must not be quoted.

CSS font-family Syntax

The syntax of font-family property in CSS, is:

font-family: x;

Here the x may be a single or multiple set of values separated by comma, and should be defined using following:

family-name generic-family - used to define the prioritized list of font family and/or generic family names
initial - used to use the default value
inherit - used to use the value inherited by the parent element

CSS font-family Example

This example contains the list of all font-family that are almost supported by all the web browsers. Therefore, you can include at least one of your favorite from all these font-family as backup font in the list of defined font-family

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .a{font-family: Arial, sans-serif;}
      .b{font-family: Verdana, sans-serif;}
      .c{font-family: Helvetica, sans-serif;}
      .d{font-family: Tahoma, sans-serif;}
      .e{font-family: "Trebuchet MS", sans-serif;}
      .f{font-family: "Times New Roman", serif;}
      .g{font-family: Georgia, serif;}
      .h{font-family: Garamond, serif;}
      .i{font-family: "Courier New", monospace;}
      .j{font-family: "Brush Script MT", cursive;}
   </style>
</head>
<body>

   <h2 class="a">font-family: Arial, sans-serif</h2>
   <h2 class="b">font-family: Verdana, sans-serif</h2>
   <h2 class="c">font-family: Helvetica, sans-serif</h2>
   <h2 class="d">font-family: Tahoma, sans-serif</h2>
   <h2 class="e">font-family: "Trebuchet MS", sans-serif</h2>
   <h2 class="f">font-family: "Times New Roman", serif</h2>
   <h2 class="g">font-family: Georgia, serif</h2>
   <h2 class="h">font-family: Garamond, serif</h2>
   <h2 class="i">font-family: "Courier New", monospace</h2>
   <h2 class="j">font-family: "Brush Script MT", cursive</h2>
   
</body>
</html>