css · level 1 · unit 3 · lesson 2
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
font-family picks the shape of the letters.
font-family chooses which font the browser uses. Not every computer has every font, so you give a list, with commas between. The browser tries each one in order.
End the list with a , a general family every computer has: serif, sans-serif or monospace. serif letters have little feet, sans-serif letters do not, and monospace letters are all the same width.
Font names with spaces go inside quote marks, like "Comic Sans MS".
<h1>Once upon a time</h1>
<p>There lived a dragon who loved tea.</p> h1 {
font-family: Georgia, "Times New Roman", serif;
}
p {
font-family: Arial, sans-serif;
} Press show my page to see it here.
The browser stops at the first font in the list that it can find.
guess first
Robot words. What will they look like?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<p>Beep boop. I am a robot.</p> p {
font-family: monospace;
}
your turn
Your turn. Pick a font for the menu.
Type a list of one or two fonts for the menu that ends with a fallback, such as Georgia, serif or Verdana, sans-serif.
the page you’re styling
<h1>Cafe menu</h1>
<p>Tea, toast and strawberry jam.</p>your css
Press show my page to see it here.
- the list ends with a fallbacknot checked yet
fix it
The heading ignores Georgia. Can you fix it?
the page you’re styling
<h1>The secret garden</h1>your css
Press show my page to see it here.
- the heading tries Georgia, then any serifnot checked yet
- The browser looked for one font with a very odd name. How many fonts are in the list?
- The fonts in a list need something between them.
- Put a comma after
Georgia, so it readsGeorgia, serif, then press run.
nailed it
you gave your words a new voice. :D
font-familypicks the font for your text.- Give a list, and end it with a fallback like
serif. - Commas go between fonts; quotes go round names with spaces.
new words in your collection
- fallback
This lesson isn’t saved. A free account remembers every lesson you finish.