CSS Font Family

Written by Swapnil RajaUpdated 30 Jul 2026

The CSS Font Family property is used to specify the typeface used to display text on a webpage.

Different fonts can significantly affect the appearance, readability, and overall design of a website. The supporting concepts are explained in CSS Font Size and Web Fonts & Typography.

CSS allows you to specify:

A single font
Multiple fallback fonts
Generic font families

If the browser cannot find the first font, it will try the next font in the list.

Syntax

CSS Font Family Syntax

css

selector {
    font-family: font-name;
}

PreviousCSS Text Decoration NextCSS Font Size

p {
    font-family: Arial, sans-serif;
}

Value	Description	Example
Arial	Common sans-serif font	font-family: Arial;
Times New Roman	Common serif font	font-family: "Times New Roman";
Courier New	Monospace font	font-family: "Courier New";
sans-serif	Generic sans-serif family	font-family: sans-serif;
serif	Generic serif family	font-family: serif;

CSS Font Family Complete Example

html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Font Family Example</title>
    <style>
        h1 {
            font-family: Arial, sans-serif;
        }
        h2 {
            font-family: "Times New Roman", serif;
        }
        p {
            font-family: "Courier New", monospace;
        }
    </style>
</head>
<body>
    <h1>Arial Font Example</h1>
    <h2>Times New Roman Font Example</h2>
    <p>This paragraph uses Courier New font.</p>
</body>
</html>

CSS Font Family

Syntax

Attributes

Example

Browser Support

Notes

Conclusion