PricingLoginStart free
CSS Academy · Lesson

Google Fonts and @font-face

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

Lesson 4 of 413 steps

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

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>:

<p>Add these tags to your document's <code>&lt;head&gt;</code>:</p>
<pre><code>&lt;link rel="preconnect" href="https://fonts.googleapis.com"&gt;
&lt;link rel="preconnect" href="https://fonts.gstatic.com" crossorigin&gt;
&lt;link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&amp;display=swap" rel="stylesheet"&gt;</code></pre>

Using Google Fonts in CSS

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

<h1>Playfair Display Heading</h1>
<p>Roboto body text below the heading.</p>

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:

<p class="brand-text">Custom brand typeface text</p>

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:

<p>Regular weight 400 text with <strong>bold weight 700 text</strong> inline.</p>

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
<p class="swap-text">Text swaps in once Inter loads.</p>

Variable Font @font-face

Variable fonts define axis ranges instead of fixed weight values:

<p class="variable-text">Variable weight text (550)</p>

Preloading Critical Fonts

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

<p>Add this to your document's <code>&lt;head&gt;</code> to preload the font file:</p>
<pre><code>&lt;link rel="preload" href="./fonts/inter.woff2" as="font" type="font/woff2" crossorigin&gt;</code></pre>

local() to Skip Download

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

<p class="roboto-text">Uses local Roboto if installed</p>

Quick Check

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

Answer it in the interactive lesson

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.

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 freeView the full course

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

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

  1. Font Family and Web-Safe Fonts
  2. Font Size Weight and Style
  3. Text Alignment Decoration and Spacing
  4. Google Fonts and @font-face
← Back to CSS Academy