The generic families side by side
What you see depends on your device: each generic keyword maps to a font your system has. Compare the shapes of the letters, especially the small feet on the serif line.
font-family takes a list of fonts in order of preference, called a font stack; the browser uses the first one it has and must always end with a generic family like sans-serif as the safety net.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a font stack for headings that prefers Georgia, then Times New Roman, and always ends in a serif.
Make all code elements use a monospace stack that prefers ui-monospace, then Consolas, then Courier New, and make all buttons use the page font.
Explain it without notes
What is a font stack, and why must it end with a generic family?
Why does a single line of text sometimes show several different fonts?
When should font names be quoted in font-family, and when must they not be?
Why don't buttons and inputs use the font you set on body, and how do you fix it?
Preview
Console
Nothing logged yet.