CSS Google Fonts

Google Fonts is a free library of over 1,500 web fonts. You link one stylesheet from Google's servers and your chosen fonts are available anywhere on your page — no downloading, no file hosting, no licensing fees.

Why Use Google Fonts

Browsers only have a small set of safe system fonts installed by default — fonts like Arial, Times New Roman, and Courier. These look generic and are the same everywhere. Google Fonts lets you use distinctive typefaces that match your brand and design without the technical work of hosting font files yourself.

How to Add a Google Font

Step 1 — Visit fonts.google.com

Browse or search for a font. Click on it to open its detail page. Click the "Get font" or "Select" button, then choose the weights you need (Regular 400, Bold 700, etc.).

Step 2 — Copy the Embed Code

Google gives you a ready-made <link> tag. Copy it.

<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=Inter:wght@400;700&display=swap" rel="stylesheet">

Step 3 — Paste into Your HTML head

<!DOCTYPE html>
<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=Inter:wght@400;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>

Step 4 — Use the Font in CSS

body {
  font-family: 'Inter', sans-serif;
}

h1, h2 {
  font-weight: 700;
}

p {
  font-weight: 400;
}

What the URL Parts Mean

DIAGRAM — Anatomy of a Google Fonts URL:

https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap

          ↑ API endpoint          ↑ Font name   ↑ Weights  ↑ Load strategy

family=Inter — the font name (use + for spaces: Open+Sans)
wght@400;700 — load regular (400) and bold (700) weights only
display=swap — show text immediately in a fallback font, then swap when the custom font loads

Loading Multiple Fonts

Separate fonts with a pipe character | in the URL, or add multiple family parameters.

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

/* Then use both */
h1 {
  font-family: 'Playfair Display', serif;
}

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

Using @import Instead of a link Tag

You can also import Google Fonts directly inside your CSS file.

/* At the very top of style.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

body {
  font-family: 'Inter', sans-serif;
}

Note: The <link> method loads faster than @import because the browser can download the font earlier in the page load process. Prefer <link> in HTML for production sites.

The preconnect Hint

The two preconnect links in the embed code tell the browser to establish a connection to Google's servers early — before it even reads the font request. This shaves off loading time.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

DIAGRAM — preconnect effect on page load:

Without preconnect:
HTML loads → font link found → connect to Google → download font
                                ↑ delay here

With preconnect:
HTML loads + preconnect starts simultaneously → font arrives sooner

font-display: swap

The display=swap parameter in the Google Fonts URL maps to the font-display: swap CSS rule. It controls what happens while the custom font is downloading.

DIAGRAM — font-display strategies:

swap (recommended):
  → Show fallback font immediately
  → Swap to custom font when ready
  → May cause a brief flash as text re-renders

block:
  → Hide text briefly while font loads
  → Show custom font (or fallback if very slow)
  → Can cause invisible text (FOIT)

optional:
  → Try to load font; if too slow, skip it
  → No layout shift, but font may not appear

Use swap for body text (readability is the priority). Use optional for decorative display fonts where skipping is acceptable.

Font Weight and Style Variants

Only load the weights you actually use. Each extra weight adds to the page's load size.

/* Load only what you need */
family=Open+Sans:wght@400;600;700

/* Loading italic variants */
family=Open+Sans:ital,wght@0,400;0,700;1,400

/* Breakdown:
   0,400 = normal style, weight 400
   0,700 = normal style, weight 700
   1,400 = italic style, weight 400
*/

Variable Fonts

Some Google Fonts are variable fonts — a single font file that contains an entire weight range. This reduces HTTP requests significantly.

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
/* Loads the full range 100 through 900 in one file */

Popular Google Font Pairings

Heading Font	Body Font	Style
Playfair Display	Source Sans 3	Elegant / editorial
Montserrat	Open Sans	Modern / corporate
Merriweather	Lato	Readable / blog
Oswald	Roboto	Bold / tech
Raleway	Nunito	Friendly / app

Always Include Fallback Fonts

If Google Fonts fails to load (slow connection, blocked by a firewall), the browser falls back to the next font in the stack.

body {
  font-family: 'Inter', Arial, sans-serif;
  /* Inter → Arial → browser default sans-serif */
}

h1 {
  font-family: 'Playfair Display', Georgia, serif;
  /* Playfair → Georgia → browser default serif */
}

Always end your font stack with a generic family (serif, sans-serif, monospace) so users always see styled text even if every custom font fails.

Google Fonts is one of the quickest ways to elevate any web page. Load only what you need, include fallback fonts, and use display=swap to keep text readable while fonts load in the background.

Previous lesson

Back to course

Next lesson