LESSON 9

Fonts

Learning objective: Apply custom fonts, including web fonts.

Understand

Fonts give your site personality.

font-family sets the typeface, listing fallbacks in case the first is unavailable. Web fonts (like Google Fonts) are loaded with a <link> and then used by name. Always end a font stack with a generic family like sans-serif.

Analogy: A font stack is like a backup plan: if the first choice is missing, the next steps in.

See It in Action

A font family with fallbacks:

body {
  font-family: "Inter", Arial, sans-serif;
}
How it works: The browser uses Inter if available, otherwise Arial, otherwise any sans-serif font — so text always renders.

Try It Yourself

  1. Add a Google Font link to your head.
  2. Apply it with font-family.
  3. Add a generic fallback at the end.

Quick Quiz

Why list multiple fonts in font-family?

Challenge

Apply a web font to your page with a proper fallback stack.

Success condition: Your page uses a custom font with at least one fallback.