CSS font-family Property

The CSS font-family property defines the font for an element.

The CSS font-family property can hold several font names as a “fallback” system. If the browser does not support the first font, it tries to fit the next font.

Note: Each value should be separated by a comma.

Syntax:

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

family-name – font family names (like “times”, “courier”, “arial”, etc.).
generic-family – generic family names (like “serif”, “sans-serif”, “cursive”, “fantasy”, “monospace”).

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.one {
  font-family: "Courier New", Courier, monospace;
}

.two {
  font-family: Arial, Tahoma, sans-serif;
}
</style>
</head>
<body>

<p class="one">This is a paragraph, shown in the Courier font.</p>

<p class="two">This is a paragraph, shown in the Arial font.</p>

</body>
</html>

Output:

This is a paragraph, shown in the Courier font.

This is a paragraph, shown in the Arial font.

Enjoy coding!

Share this: