CSS Academy · Lesson

Font Family and Web-Safe Fonts

Set font families and understand which fonts are safe to use across all browsers.

Font Family and Web-Safe Fonts is a free CSS Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

font-family Property

The font-family property sets the typeface for an element. You provide a font stack: a comma-separated list of font names from most preferred to least, ending with a generic family.

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

Generic Font Families

CSS defines five generic families as fallbacks:

serif — fonts with decorative strokes (Times, Georgia)
sans-serif — clean fonts without strokes (Arial, Helvetica)
monospace — fixed-width fonts (Courier, Consolas)
cursive — handwriting-style fonts
fantasy — decorative display fonts

Web-Safe Fonts

Web-safe fonts are pre-installed on virtually all operating systems. You can rely on them without loading an external font file:

Sans-serif: Arial, Helvetica, Verdana, Trebuchet MS
Serif: Georgia, Times New Roman
Monospace: Courier New, Consolas

Font Names with Spaces

Font names containing spaces must be enclosed in quotes:

font-family: "Times New Roman", Times, serif;
font-family: "Open Sans", sans-serif;

Font Stacks Best Practice

Build your font stack with:

Your preferred font (may not be installed)
One or two similar fallbacks
A generic family as the last resort

font-family: "Georgia", "Palatino Linotype", serif;

System UI Fonts

Modern designs often use system fonts — the native UI font of the operating system. This looks native and requires zero download:

font-family: system-ui, -apple-system, BlinkMacSystemFont,
             "Segoe UI", Roboto, sans-serif;

Monospace Stacks for Code

Code editors and terminals need a monospace stack:

code, pre {
  font-family: "Fira Code", "Cascadia Code",
               "JetBrains Mono", monospace;
}

Inheriting font-family

Most elements inherit font-family from their parent. Some form elements (<input>, <textarea>) do not inherit by default in some browsers — set them explicitly:

input, textarea, select, button {
  font-family: inherit;
}

Checking Available Fonts

You can check if a system font is available with the local() function inside @font-face. Browsers try local first before downloading.

@font-face {
  font-family: 'MyFont';
  src: local('Helvetica Neue'), url('font.woff2') format('woff2');
}

Unicode-Range Subsetting

When loading fonts, use unicode-range in @font-face to load only the character ranges you need, reducing download size for multilingual sites.

@font-face {
  font-family: 'Inter';
  src: url('inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF;
}

Variable Fonts Overview

Variable fonts contain a whole family (weights, widths, styles) in a single file using font variation axes. They dramatically reduce HTTP requests for typography-rich designs.

Quick Check

Which generic font family should you use as a final fallback for a sans-serif font stack?

Recap

The font-family property takes a font stack ending in a generic family. Web-safe fonts work everywhere without loading. System UI stacks give a native feel with zero HTTP cost. Always quote font names containing spaces.

Frequently asked questions

Is the “Font Family and Web-Safe Fonts” lesson free?

Yes — the full text of “Font Family and Web-Safe Fonts” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.

What will I learn in “Font Family and Web-Safe Fonts”?

Set font families and understand which fonts are safe to use across all browsers. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start CSS Academy?

No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Font Family and Web-Safe Fonts” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this CSS Academy lesson?

Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to CSS Academy