HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials
CSS Tutorial

CSS Text & Fonts

CSS Font Family

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.

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;
}

CSS Font Family Example

css

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

If Arial is unavailable, the browser will use a generic sans-serif font.

Attributes

ValueDescriptionExample
ArialCommon sans-serif fontfont-family: Arial;
Times New RomanCommon serif fontfont-family: "Times New Roman";
Courier NewMonospace fontfont-family: "Courier New";
sans-serifGeneric sans-serif familyfont-family: sans-serif;
serifGeneric serif familyfont-family: serif;

Example

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>

Output

Browser Output

css

The <h1> will appear using Arial
The <h2> will appear using Times New Roman
The paragraph will appear using Courier New
If a font is unavailable, the browser will use the next available fallback font

Browser Support

Chrome
Edge
Firefox
Safari
Opera
IE
YesYesYesYesYesYes

Notes

  • Always provide fallback fonts for better compatibility.
  • Font names containing spaces should be enclosed in quotes.
  • Generic font families include serif, sans-serif, monospace, cursive, and fantasy.
  • Web fonts from services like Google Fonts can also be used.
  • Choose fonts that are readable across different devices and screen sizes.

Conclusion

The CSS Font Family property allows you to control the typography of your website. By selecting appropriate fonts and providing fallback options, you can improve readability, maintain consistency, and create a more professional user experience.

PreviousCSS Text DecorationNextCSS Font Size