Font family in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output of this CSS snippet?

Given the CSS below, what font will the paragraph text use if the user's system does not have 'Comic Sans MS' installed but has 'Arial'?

CSS

p {
  font-family: 'Comic Sans MS', Arial, sans-serif;
}

A The text will not display any font.

B The text will use 'Comic Sans MS' font.

C The text will use the browser default serif font.

D The text will use 'Arial' font.

💡 Hint

The browser tries fonts in order until it finds one installed on the system.

The browser tries to use 'Comic Sans MS' first. If it's not available, it tries 'Arial'. Since 'Comic Sans MS' is missing but 'Arial' is present, the text uses 'Arial'.

🧠 Conceptual

intermediate

How many font families are specified in this CSS rule?

Look at the CSS below. How many font families are listed in the font-family property?

CSS

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

A 3

B 1

C 4

D 2

💡 Hint

Count each font name or generic family separated by commas.

The font-family property lists three fonts: 'Times New Roman', Georgia, and the generic family serif.

❓ selector

advanced

Which CSS selector applies the font-family only to paragraphs inside a section with class 'intro'?

Choose the correct CSS selector to apply font-family only to <p> elements inside <section class="intro">.

A section.intro p { font-family: Arial, sans-serif; }

B p.section.intro { font-family: Arial, sans-serif; }

C .intro > p { font-family: Arial, sans-serif; }

D section p.intro { font-family: Arial, sans-serif; }

💡 Hint

Think about how to select paragraphs inside a section with a specific class.

Option A selects all <p> elements inside any <section> with class 'intro'.

Option A looks for <p> elements with classes 'section' and 'intro', which is incorrect.

Option A selects direct child <p> of any element with class 'intro', which may not be a section.

Option A selects <p> elements with class 'intro' inside any section, not paragraphs inside section.intro.

❓ layout

advanced

What visual effect does this CSS produce on the text?

Consider the CSS below applied to a heading. What will the user see?

CSS

h2 {
  font-family: 'Courier New', monospace;
  font-weight: bold;
  font-style: italic;
}

A The heading text appears bold but not italic in a sans-serif font.

B The heading text appears bold and italic in a monospace font.

C The heading text appears normal weight and style in a serif font.

D The heading text appears italic but not bold in a cursive font.

💡 Hint

Look at font-family, font-weight, and font-style properties.

The font-family sets a monospace font ('Courier New' or monospace fallback).

font-weight: bold makes the text bold.

font-style: italic makes the text italic.

❓ accessibility

expert

Which font-family choice best supports accessibility for users with dyslexia?

Which font-family option below is considered best practice to improve readability for users with dyslexia?

A 'Comic Sans MS', cursive, sans-serif

B 'Arial Black', sans-serif

C 'Open Dyslexic', Arial, sans-serif

D 'Times New Roman', serif

💡 Hint

Some fonts are specially designed to help dyslexic readers.

'Open Dyslexic' is a font designed to improve readability for dyslexic users.

Including fallbacks like Arial and sans-serif ensures text displays if 'Open Dyslexic' is unavailable.

Other fonts like Comic Sans or Times New Roman are not specifically designed for dyslexia.