Skip to main content
HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

CSS Text & Fonts

CSS Font Family

Written by Updated

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

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>

Browser Support

Feature
Chrome
Edge
Firefox
Safari
font-family11211

Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8.

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