Skip to main content

CSS Font Family — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the CSS Font Family lesson. Every one is checked automatically in the browser — write the code, run it, and the tests tell you what still fails.

Exercises(5)

  1. 1

    Set a font stack

    easy10 min

    Use Arial with a sans-serif fallback on #text.

  2. 2

    Quote a multi-word family

    easy10 min

    Use 'Times New Roman' with a serif fallback.

  3. 3

    Build a three-step stack

    easy10 min

    Georgia, then 'Times New Roman', then serif.

  4. 4

    Use a generic family

    easy10 min

    Set #title to monospace.

  5. 5

    Different fonts per element

    medium10 min

    Monospace heading, Arial body.

Find the bug(5)

  1. 1

    Fix the missing fallback

    easy8 min

    A stack should end in a generic family.

  2. 2

    Fix the mismatched fallback

    easy8 min

    A serif font should fall back to serif, not sans-serif.

  3. 3

    Fix the missing comma

    easy8 min

    Families in a stack are separated by commas.

  4. 4

    Fix the misspelled generic family

    easy8 min

    The generic family is monospace.

  5. 5

    Fix the font on the wrong element

    easy8 min

    The heading should be the monospace one.

Ready to write the code?

The editor, the automatic checks and the worked solutions open up with an account.

Open the workspace