Font family in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the font family to Arial.

CSS

body { font-family: [1]; }

Drag options to blanks, or click blank then click option'

AArial

Bbold

Ccenter

D12px

Attempts:

3 left

💡 Hint

Common Mistakes

Using font size or font weight instead of font family.

Forgetting to put the font name without quotes if it is a single word.

The font-family property sets the font of the text. Here, Arial is the correct font name.

2fill in blank

medium

Complete the code to set the font family to a list with Helvetica and fallback to sans-serif.

CSS

p { font-family: [1]; }

Drag options to blanks, or click blank then click option'

A"Helvetica", sans-serif

B"Times New Roman", serif

Cbold

Dcenter

Attempts:

3 left

💡 Hint

Common Mistakes

Not using quotes around font names with spaces.

Using font weight or alignment instead of font family.

The font-family property can have multiple fonts separated by commas. The browser uses the first available font. Here, "Helvetica", sans-serif means use Helvetica if available, otherwise use any sans-serif font.

3fill in blank

hard

Fix the error in the font-family declaration to use the correct syntax.

CSS

h1 { font-family: [1]; }

Drag options to blanks, or click blank then click option'

A"Arial sans-serif"

BArial sans-serif

CArial, sans-serif

DArial; sans-serif

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting commas between font names.

Putting semicolons inside the property value.

The correct syntax for multiple fonts in font-family is to separate them with commas. Option C uses a comma between Arial and sans-serif.

4fill in blank

hard

Fill both blanks to set the font family to 'Courier New' with fallback monospace.

CSS

code { font-family: [1], [2]; }

Drag options to blanks, or click blank then click option'

A"Courier New"

BArial

Cmonospace

Dserif

Attempts:

3 left

💡 Hint

Common Mistakes

Not quoting font names with spaces.

Using wrong fallback fonts like serif for code.

The font family list uses quotes for font names with spaces like "Courier New". The fallback generic font is monospace.

5fill in blank

hard

Fill all three blanks to set font family with 'Georgia', fallback 'Times New Roman', and generic serif.

CSS

div { font-family: [1], [2], [3]; }

Drag options to blanks, or click blank then click option'

AGeorgia

B"Times New Roman"

Cserif

Dsans-serif

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting quotes around 'Times New Roman'.

Using wrong generic font family.

The font family list includes Georgia (no quotes needed), then "Times New Roman" (quotes needed because of spaces), and finally the generic family serif as fallback.

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