14. CSS Fonts

What you will learn

Font families and fallback lists
Font size, weight, and style
The font shorthand
How web fonts work and what they cost

Font family

font-family takes a list. The browser uses the first font that is installed and falls back to the next. Always end the list with a generic family.

Generic family	Looks like
`serif`	Letters with small strokes on the ends (like a printed book)
`sans-serif`	Clean letters without those strokes
`monospace`	Every letter has the same width (used for code)
`cursive`, `fantasy`	Decorative styles, rarely used for body text

Example

<style>
  .a { font-family: Georgia, "Times New Roman", serif; }
  .b { font-family: Arial, Helvetica, sans-serif; }
  .c { font-family: "Courier New", Consolas, monospace; }
</style>

<p class="a">A serif font stack</p>
<p class="b">A sans-serif font stack</p>
<p class="c">A monospace font stack</p>

Output

A serif font stack

A sans-serif font stack

A monospace font stack

Font names that contain spaces must be in quotes, such as "Times New Roman". Exact appearance depends on the fonts installed on the visitor’s device.

Unit	Meaning
`px`	A fixed pixel size
`em`	A multiple of the parent’s font size
`rem`	A multiple of the page’s root font size (usually 16px)
`%`	A percentage of the parent’s font size

Weight and style

Example

<style>
  .light { font-weight: 300; }
  .bold { font-weight: 700; }
  .italic { font-style: italic; }
</style>

<p class="light">Weight 300 (light, if the font has it)</p>
<p class="bold">Weight 700 (bold)</p>
<p class="italic">Italic style</p>

Output

Weight 300 (light, if the font has it)

Weight 700 (bold)

Italic style

font-weight accepts normal (400), bold (700), or numbers from 100 to 900. A font only shows the weights it contains.

The font shorthand

Style, weight, size, line height, and family can be written in one line. The size and the family are required, and the family must be last.

Syntax

p {
  font: italic 700 1.25rem/1.5 Georgia, serif;
}

Here 1.25rem/1.5 means font size 1.25rem and line height 1.5.

Web fonts

You can load a font file that visitors do not have installed, using @font-face or a font service. A typical setup looks like this:

Syntax

@font-face {
  font-family: "MyFont";
  src: url("fonts/myfont.woff2") format("woff2");
  font-display: swap;
}

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

woff2 is the smallest and best-supported format.
font-display: swap shows fallback text straight away while the font downloads.
Check the font’s licence before using it, and load only the weights you need, because every font file slows the page.
The Try it Yourself editor blocks external files, so web fonts will not load there. They work on a real website.

Common mistakes

Leaving out the generic fallback at the end of the list.
Forgetting quotes around font names with spaces.
Using many different fonts on one page. Two at most is a good rule.
Very small text, below 16px for body copy, which is hard to read.

Exercise

Style .quote in italics, in the font stack Georgia, serif, at a size of 1.5rem.

Show solution

<style>
  .quote {
    font-family: Georgia, serif;
    font-size: 1.5rem;
    font-style: italic;
  }
</style>
<p class="quote">Practice makes progress.</p>

Knowledge check

1. Why end a font list with a generic family?

So the browser has a fallback if none of the named fonts are installed.

2. Which unit respects the visitor’s browser font setting?

rem (and em).

3. What does font-display: swap do?

It shows fallback text immediately and swaps in the web font when it has loaded.

Summary

Use a font stack ending in a generic family.
Prefer rem for sizes, and keep body text at least 16px.
Web fonts need files, a licence, and care for page speed.