🎓 A1Learner
🔍

CSS Fonts

A font family is a named set of letter shapes, like Georgia. The font-family property picks the family for text.

Set the heading family

The stack names Georgia first. The generic family serif is the fallback.

h1 {
  font-family: Georgia, serif;
}

Set the family for the page

A rule on the body passes its family down to every element. The list items show the same stack.

body {
  font-family: Arial, sans-serif;
}

Use a name with a space

The name Courier New has a space, so it sits in quotes. The generic family monospace ends the stack.

.box p {
  font-family: "Courier New", monospace;
}

Example

body {
  font-family: Arial, sans-serif;
}
h1 {
  font-family: Georgia, serif;
}
.box p {
  font-family: "Courier New", monospace;
}
#demo {
  font-family: monospace;
}

Key points

  • A font stack lists families in the order the browser should try them.
  • The browser uses the first family in the stack that it has.
  • Generic families include serif, sans-serif and monospace.
  • A generic family stands last in a stack as the final fallback.
  • A family name with a space in it needs quotes around it.
  • One font-family rule on the body can set the typeface for the whole page.

In this example, the body rule sets Arial for the whole page. The list items inherit that stack. The heading uses Georgia with a serif fallback. The paragraph inside the box uses Courier New. The demo paragraph uses the generic monospace family.

Try it Yourself

Edit the code, then press Run.

Runs in your browser — the preview under the editor is the real result. Nothing is sent to a server. The code runner panel (right) does the same with more room.

Exercise

Why does a font stack end with a generic family?