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.