Understanding the CSS Font-Family Property: A Comprehensive Guide

The font-family property in Cascading Style Sheets (CSS) is a powerful tool that allows web designers to control the typography of their websites. This tutorial will walk you through how to use this property effectively.

What is the CSS Font-Family Property?

The font-family property in CSS is used to specify the typeface that will be applied to a certain element. This can be any text element, such as paragraphs, headings, or links.

How To Use The Font-Family Property

To use the font-family property, you need to declare it within your CSS rule-set. Here’s an example:

body {
    font-family: Arial, sans-serif;

In this example, ‘Arial’ is the primary font and ‘sans-serif’ is the fallback option if ‘Arial’ isn’t available on a user’s computer.

Specifying Multiple Fonts

You can specify multiple fonts by separating them with commas. The browser will use the first available font from left to right:

body {
    font-family: "Times New Roman", Times, serif;

Using Quotation Marks

If a font name contains white space, it must be placed within quotation marks:

body {
    font-family: "Courier New", Courier, monospace;

Generic Family Names In CSS

Besides specific family names like ‘Arial’, ‘Verdana’, etc., CSS also defines five generic family names:

  • Serif: Times New Roman, Georgia, etc.
  • Sans-serif: Arial, Verdana, etc.
  • Monospace: Courier New, Lucida Console, etc.
  • Cursive: Comic Sans MS, Pacifico, etc.
  • Fantasy: Impact, western, etc.


The font-family property is a versatile tool in CSS that allows you to control the typography of your website. By understanding how to use it effectively and knowing the different family names available to you can greatly enhance your web design skills. Happy coding!

Leave a Reply

Your email address will not be published. Required fields are marked *