CSS Academy · Lesson

Font Family and Web-Safe Fonts

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

Lesson 1 of 413 steps

Font Family and Web-Safe Fonts is a free CSS Academy lesson on CoddyKit. This is 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, and your progress syncs across the web and the CoddyKit app. The CSS Academy course includes 4 lessons in total.

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.

<p>This text renders in the page's body font stack.</p>

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:

<p class="serif-example">"Times New Roman", Times, serif</p>
<p class="sans-example">"Open Sans", sans-serif</p>

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

<p class="font-stack">Georgia &rarr; Palatino Linotype &rarr; serif fallback</p>

System UI Fonts

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

<p class="system-ui-text">This uses your OS's native UI font.</p>

Monospace Stacks for Code

Code editors and terminals need a monospace stack:

<p>Inline <code>const x = 1;</code> code.</p>
<pre>function hello() {
  return "world";
}</pre>

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 type="text" placeholder="Input" />
<textarea placeholder="Textarea"></textarea>
<select><option>Select</option></select>
<button>Button</button>

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.

<p class="my-font-text">Text using MyFont (local match or fallback)</p>

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.

<p class="inter-text">Basic Latin text (U+0000&ndash;00FF range)</p>

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?

Answer it in the interactive lesson

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.

Free to start

Learn CSS with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 40
Lessons: 159

Start learning free View the full course

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. 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. The CSS Academy course includes 4 lessons in total.

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, so you can start here or from the beginning and move at your own pace. This is lesson 1 of 4.

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