Declaring Fonts in CSS

Before CSS, we used HTML’s <font> tag to specify font faces on our web pages. CSS now offers us the font-family attribute to style text.

1. Basic syntax

In these examples, we are using the <p> tag as our selector:

p {
    font-family: Arial;
}

If the name of the font has spaces in it, the name must be enclosed in quotes:

p {
    font-family: "Times New Roman";
}

2. Fallback list

You most likely want to use fonts slightly more original than Arial or Times New Roman. You can provide a list of fonts as follows:

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

If the first font in the list (Trebuchet MS) is not available, the browser will fall back and attempt the next font in the list (Arial), and so on. Each time, the last item in your list would normally be serif or sans-serif.

3. “Web Safe”

W3Schools lists the following web-safe fonts:

• Arial (sans-serif)
• Verdana (sans-serif)
• Tahoma (sans-serif)
• Trebuchet MS (sans-serif)
• Times New Roman (serif)
• Georgia (serif)
• Garamond (serif)
• Courier New (monospace)
• Brush Script MT (cursive)

Screenshot of the list of web-safe fonts.

W3Schools lists the following commonly used fallback fonts:

• Serif
• Sans-serif
• Monospace
• Cursive
• Fantasy

4. Next steps

Google hosts a large number of fonts which you can use on your web pages: see the tutorial Using Google Fonts on your website

References:

1. W3schools. (No date) CSS Reference. Available at: https://www.w3schools.com/cssref/index.php (Accessed: 4 October 2023).