CSS Academy · Lesson

Google Fonts and @font-face

Load external fonts from Google Fonts or define custom fonts using the @font-face rule.

Google Fonts and @font-face is a free CSS Academy lesson on CoddyKit — lesson 4 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.

Why Custom Fonts?

Web-safe fonts cover only a handful of choices. Custom fonts let you match brand identity precisely. The two main approaches are Google Fonts (hosted service) and @font-face (self-hosted).

Google Fonts Setup

Visit fonts.google.com, select a font family, choose weights, and copy the <link> tag into your HTML <head>:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

Using Google Fonts in CSS

After linking, reference the font by name in your font-family stack:

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

h1 {
  font-family: "Playfair Display", serif;
  font-weight: 700;
}

Google Fonts API Parameters

The display=swap parameter uses the Font Display Swap strategy — text shows in the fallback font immediately, then swaps when the custom font loads. This prevents invisible text during load.

@font-face Basics

@font-face lets you load a custom font file that you host yourself. Define the font family name and file source:

@font-face {
  font-family: 'MyBrandFont';
  src: url('./fonts/mybrand.woff2') format('woff2'),
       url('./fonts/mybrand.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

WOFF2: The Modern Format

WOFF2 (Web Open Font Format 2) is the recommended format. It offers the best compression (typically 30% smaller than WOFF) and is supported by all modern browsers. Always include WOFF as a fallback.

Multiple Weights with @font-face

Declare one @font-face block per weight/style combination. Use the same font-family name so the browser selects the right file automatically:

@font-face {
  font-family: 'Inter';
  src: url('inter-400.woff2') format('woff2');
  font-weight: 400;
}
@font-face {
  font-family: 'Inter';
  src: url('inter-700.woff2') format('woff2');
  font-weight: 700;
}

font-display Property

The font-display descriptor controls font loading behavior:

swap — show fallback immediately, swap when ready (recommended)
block — invisible text for up to 3 seconds
fallback — short block then permanent fallback
optional — use only if already cached

@font-face {
  font-family: 'Inter';
  src: url('inter.woff2') format('woff2');
  font-display: swap;
}

Variable Font @font-face

Variable fonts define axis ranges instead of fixed weight values:

@font-face {
  font-family: 'InterVariable';
  src: url('inter-variable.woff2') format('woff2 supports variations');
  font-weight: 100 900;
  font-display: swap;
}

Preloading Critical Fonts

Preload your most important font file to reduce render-blocking delay. Add a <link rel="preload"> before the stylesheet:

<link rel="preload" href="./fonts/inter.woff2" as="font" type="font/woff2" crossorigin>

local() to Skip Download

Use local() in src to check if the user already has the font installed before downloading:

@font-face {
  font-family: 'Roboto';
  src: local('Roboto'), url('roboto.woff2') format('woff2');
}

Quick Check

Which font format provides the best compression and broadest modern browser support?

Recap

Google Fonts provides easy hosted fonts via a <link> tag. Self-host fonts with @font-face using WOFF2 format and font-display: swap for best performance. Preload critical fonts and use local() to avoid unnecessary downloads.

Frequently asked questions

Is the “Google Fonts and @font-face” lesson free?

Yes — the full text of “Google Fonts and @font-face” 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 “Google Fonts and @font-face”?

Load external fonts from Google Fonts or define custom fonts using the @font-face rule. 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 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Google Fonts and @font-face” 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