Font family in CSS - Mini Project: Build & Apply

Setting a Font Family with CSS

📖 Scenario: You are creating a simple webpage and want to set a nice font for the text so it looks clean and easy to read.

🎯 Goal: Apply a font family to the entire webpage so all text uses the chosen font.

📋 What You'll Learn

Use a CSS rule to set the font family for the body element

Choose the font family Arial, sans-serif

Write valid CSS code

💡 Why This Matters

🌍 Real World

Setting font families is a basic step in making websites look good and readable for visitors.

💼 Career

Web developers often need to style text with fonts that match brand guidelines and improve user experience.

1

Create the CSS selector for the body element

Write a CSS rule that starts with the selector body followed by curly braces { } to style the whole page.

CSS

/* Write the CSS selector for the body element here */

/* Your code here */

Hint

Start by writing body { } to target the whole page.

2

Add the font-family property inside the body selector

Inside the body { } selector, add the CSS property font-family with the value Arial, sans-serif followed by a semicolon.

CSS

body {
  /* Add font-family property here */
  /* Your code here */
}

Hint

Use font-family: Arial, sans-serif; to set the font.

3

Add a fallback font to the font-family property

Modify the font-family property value to include the fallback font Helvetica before Arial, so it reads font-family: Helvetica, Arial, sans-serif;.

CSS

body {
  /* Add Helvetica as a fallback font before Arial */
  /* Your code here */
}

Hint

List fonts separated by commas, starting with Helvetica.

4

Complete the CSS with a comment explaining the font choice

Add a CSS comment above the body selector that says /* Setting font family for the whole page */.

CSS

/* Add a comment explaining the font choice here */
/* Your code here */
body {
  font-family: Helvetica, Arial, sans-serif;
}

Hint

Use /* comment text */ syntax for CSS comments.

Practice

1. What does the CSS font-family property control on a webpage?

easy

A. The style and type of text fonts displayed

B. The size of the text

C. The color of the text

D. The spacing between letters

Solution

1. Step 1: Understand the role of font-family

   The font-family property sets which font or fonts the browser uses to display text.

2. Step 2: Differentiate from other text properties

   Size, color, and spacing are controlled by other CSS properties like font-size, color, and letter-spacing.

3. Final Answer:

   The style and type of text fonts displayed -> Option A

4. Quick Check:

   font-family controls font style = C [OK]

Hint: Remember: font-family picks fonts, not size or color [OK]

Common Mistakes:

• Confusing font-family with font-size
• Thinking font-family changes text color
• Mixing font-family with letter spacing

2. Which of the following is the correct syntax to set a font family with a font name containing spaces?

easy

A. font-family: ArialBlack, sans-serif;

B. font-family: Arial Black, sans-serif;

C. font-family: Arial Black sans-serif;

D. font-family: 'Arial Black', sans-serif;

Solution

1. Step 1: Recognize font names with spaces need quotes

   Font names with spaces like "Arial Black" must be wrapped in quotes to be read correctly.

2. Step 2: Check syntax correctness

   font-family: 'Arial Black', sans-serif; uses quotes and separates fonts with commas, which is correct syntax.

3. Final Answer:

   font-family: 'Arial Black', sans-serif; -> Option D

4. Quick Check:

   Quotes needed for multi-word fonts = A [OK]

Hint: Use quotes around font names with spaces [OK]

Common Mistakes:

• Omitting quotes for multi-word font names
• Missing commas between font names
• Combining font names without spaces or commas

3. Given the CSS rule:

p { font-family: 'Times New Roman', Georgia, serif; }

What font will the browser use if 'Times New Roman' is not available but Georgia is?

medium

A. Times New Roman

B. Georgia

C. serif

D. Arial

Solution

1. Step 1: Understand font-family fallback order

   The browser tries fonts in order: first 'Times New Roman', then Georgia, then generic serif.

2. Step 2: Apply fallback logic

   If 'Times New Roman' is missing, the browser uses the next available font, which is Georgia.

3. Final Answer:

   Georgia -> Option B

4. Quick Check:

   Fallback font used if first missing = B [OK]

Hint: Browser picks first available font in list [OK]

Common Mistakes:

• Assuming browser uses generic serif first
• Ignoring font order in the list
• Thinking browser picks random font

4. Identify the error in this CSS rule:

h1 { font-family: Arial, 'Helvetica Neue' sans-serif; }

medium

A. Missing comma between 'Helvetica Neue' and sans-serif

B. Quotes around 'Helvetica Neue' are incorrect

C. Arial should be in quotes

D. Font-family property cannot have more than two fonts

Solution

1. Step 1: Check font list syntax

   Font names must be separated by commas. Here, there's no comma between 'Helvetica Neue' and sans-serif.

2. Step 2: Confirm quotes and other syntax

   Quotes around 'Helvetica Neue' are correct; Arial does not need quotes; multiple fonts are allowed.

3. Final Answer:

   Missing comma between 'Helvetica Neue' and sans-serif -> Option A

4. Quick Check:

   Font names must be comma-separated = A [OK]

Hint: Always separate font names with commas [OK]

Common Mistakes:

• Forgetting commas between font names
• Misusing quotes around single-word fonts
• Thinking font-family limits number of fonts

5. You want to ensure your webpage text uses the font 'Open Sans' if available, otherwise falls back to Arial, then any sans-serif font. Which CSS rule correctly achieves this?

hard

A. font-family: Open Sans, Arial, sans-serif;

B. font-family: 'Open Sans', 'Arial', serif;

C. font-family: 'Open Sans', Arial, sans-serif;

D. font-family: 'Open Sans' Arial sans-serif;

Solution

1. Step 1: Use quotes for multi-word font names

   'Open Sans' has a space, so it must be in quotes.

2. Step 2: Separate fonts with commas and use generic family without quotes

   Fonts must be comma-separated. Arial is a single word and does not need quotes. The generic family sans-serif should not be quoted.

3. Final Answer:

   font-family: 'Open Sans', Arial, sans-serif; -> Option C

4. Quick Check:

   Quotes for multi-word + commas + generic unquoted = D [OK]

Hint: Quote multi-word fonts, separate with commas, generic unquoted [OK]

Common Mistakes:

• Not quoting multi-word font names
• Missing commas between fonts
• Quoting generic font families