Font Family

Part of the Styling with CSS section of Coddy's HTML journey — lesson 18 of 76.

In CSS, the font-family property is used to specify the typeface for text within an HTML element. This property lets you list preferred fonts for your text. If the first font isn't available, the browser will use the next one in the list, ensuring a similar look.

Here's the basic syntax for using the font-family property:

selector {
    font-family: font1, font2, generic-family;
}

font1, font2: The preferred font family names, listed in order of preference. If font1 is not available, the browser will try font2, and so on.

generic-family: A generic font family name, such as serif, sans-serif, monospace, cursive, or fantasy. This serves as a fallback if none of the specified fonts are available.

When specifying font family names, it's important to follow these guidelines:

If a font family name contains whitespace, it should be enclosed in quotation marks (e.g., "Times New Roman", "Courier New").

Multiple font family names should be separated by commas.

It's a good practice to include a generic font family as the last option in the list to ensure that a suitable fallback is used if none of the specified fonts are available.

For example:

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

Challenge

Easy

You are given an HTML document with a heading (<h1>) and a paragraph (<p>). Your task is to use the font-family property to style these elements. Follow the steps below:

Write a CSS rule that targets the <h1> element. Set the font-family to "Times New Roman", Times, serif.
Write a CSS rule that targets the <p> element. Set the font-family to Arial, Helvetica, sans-serif.

Cheat sheet

The font-family property specifies the typeface for text. List preferred fonts in order - if the first isn't available, the browser uses the next one.

Basic syntax:

selector {
    font-family: font1, font2, generic-family;
}

Guidelines:

Font names with spaces need quotation marks: "Times New Roman"
Separate multiple fonts with commas
Include a generic family (serif, sans-serif, monospace, cursive, fantasy) as fallback

Example:

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

Try it yourself

<html>
<head>
    <title>Font Family</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>