Fallback values in CSS - Mini Project: Build & Apply

Using Fallback Values in CSS

📖 Scenario: You are creating a simple webpage that uses a custom font. Sometimes the custom font might not load, so you want to provide fallback fonts to keep the text readable and nice.

🎯 Goal: Build a CSS style that sets a custom font with fallback fonts for the body text. This ensures the text looks good even if the custom font is not available.

📋 What You'll Learn

Create a CSS rule for the body element

Set the font-family property with a custom font name first

Add at least two fallback fonts after the custom font

Use a generic font family as the last fallback

💡 Why This Matters

🌍 Real World

Web designers use fallback fonts to make sure text looks good even if the preferred font fails to load.

💼 Career

Knowing how to set fallback fonts is important for front-end developers to create reliable and accessible websites.

1

Create the CSS rule for the body element

Write a CSS rule that targets the body element. Inside the curly braces, leave it empty for now.

CSS

body {
  /* Your code here */
}

Need a hint?

Start by writing body { } to create a CSS rule for the body.

2

Add the font-family property with a custom font

Inside the body CSS rule, add the property font-family and set its value to 'Open Sans' (including quotes).

CSS

body {
  /* Add font-family with 'Open Sans' here */
}

Need a hint?

Use font-family: 'Open Sans'; inside the body rule.

3

Add fallback fonts after the custom font

Modify the font-family property value to include two fallback fonts after 'Open Sans': Arial and Helvetica, separated by commas.

CSS

body {
  font-family: 'Open Sans', Arial, Helvetica;
  /* Your code here */
}

Need a hint?

Separate font names with commas like font-family: 'Open Sans', Arial, Helvetica;.

4

Add a generic fallback font family

Add the generic font family sans-serif as the last fallback in the font-family property value, after Helvetica, separated by a comma.

CSS

body {
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  /* Your code here */
}

Need a hint?

End the font list with sans-serif to ensure a generic fallback.