CSS - font-family Property

Quiz

CSS font-family property is used to specify the preferred font or a list of fonts to be used on a webpage. It refers to the group or category of fonts that have similar design characteristics. A specific font name is to be mentioned first followed by a generic font name.

Syntax

font-family: font-family name | generic-family name | initial | inherit;

Property Values

Value	Description
font-family name, generic-family name	A listed of interested font family names and/or generic-family names.
initial	This sets the property to its default value.
inherit	This inherits the property from the parent element.

Example of CSS Font Family Property

The following example explains the font-family property with different fonts.

Font Family Property with Different Fonts

To apply different font styles to webpage text, use the font-family property. we specify a specific font followed by generic fonts as fallbacks for cases where the browser cannot find the specific font. The following example demonstrates the usage.

<!DOCTYPE html>
<html>

<head>
  <style>
     .size {
        font-size: larger;
     }

     #font-1 {
        font-family: Times New Roman, Times, serif;
     }

     #font-2 {
        font-family: verdana, georgia;
     }

     #font-3 {
        font-family: Arial, Helvetica, sans-serif;
     }
  </style>
</head>

<body>
  <h2>
     CSS font-family property
  </h2>
  <h4>
     font-family: Times New Roman, Times, serif
  </h4>
  <p id="font-1" class="size">
     TutorialsPoint is an online platform offering free 
     and comprehensive tutorials on a wide range of topics,
     including programming, web development,and data science.
     It provides structured lessons, examples, and exercises
     to support self-paced learning and skill development.
  </p>
  <h4>
     font-family: verdana, georgia
  </h4>
  <p id="font-2" class="size">
     TutorialsPoint is an online platform offering free 
     and comprehensive tutorials on a wide range of topics,
     including programming, web development,and data science.
     It provides structured lessons, examples, and exercises
     to support self-paced learning and skill development.
  <h4>
     font-family: Arial, Helvetica, sans-serif
  </h4>
  <p id="font-3" class="size">
     TutorialsPoint is an online platform offering free 
     and comprehensive tutorials on a wide range of topics,
     including programming, web development,and data science.
     It provides structured lessons, examples, and exercises
     to support self-paced learning and skill development.
</body>

</html>

Note:

Specific font names: Examples include "Arial", "Times New Roman", "Courier New", "Verdana", "Helvetica", etc.
Generic font families: These are general categories of fonts that will be used if the specific fonts are not available. Examples include "serif", "sans-serif", "monospace", "cursive", "fantasy".
Font stacks: These are a list of fonts separated by commas, where the browser will use the first available font in the list. For example: "Arial, Helvetica, sans-serif".

Supported Browsers

Property
font-family	1.0	4.0	1.0	1.0	3.5

css_reference.htm

Print Page