Font Family & Web Fonts
What is a Font Family?
Imagine you are printing a magazine article. You can print the headings in a modern, bold sans-serif font (like Arial or Helvetica), the paragraphs in a classic, structured serif font (like Times New Roman), and code blocks in a neat typewriter font (like Courier).In CSS, the font-family property defines the typeface used for text. Because you can't guarantee every website visitor has your exact custom font installed on their computer, CSS uses a fallback system (a prioritized list of fonts) to ensure the site looks good on any device.
Why does it matter?
Typography determines readability, tone, and overall aesthetic. A sleek tech site might use clean geometric sans-serif fonts, while a news website uses elegant serif fonts. Connecting web fonts (like Google Fonts) allows you to use gorgeous, custom typography globally.Syntax Breakdown
font-family: [First Choice], [Second Choice], [Generic Fallback];
E.g., font-family: 'Space Grotesk', Arial, sans-serif;
'Space Grotesk' (First Choice): The custom font we want to load. Since the name contains spaces, it *must* be wrapped in quotes!Arial (Second Choice): A widely available fallback font if the first choice fails to load.sans-serif (Generic Fallback): The browser's default sans-serif font (without decorative serifs/feet) as a final emergency fallback.Common Mistakes
font-family: Space Grotesk, sans-serif; without quotes will cause browsers to ignore the custom font because of the space.font-family: 'MyCustomFont';. If that font fails to load, the browser will fall back to its system default, which might completely break your design.Quick Reference
font-family — Configures the prioritized typeface checklist.serif — Fonts with small decorative lines/feet on letters.sans-serif — Clean, modern, straight letter outlines.monospace — Fixed-width characters (essential for code displays).Your Task
In the `body` selector, set `font-family` to `'Space Grotesk', sans-serif`.
index.html
Type code above to start the lesson.
Live Preview