Tutorial

Great typography, one link away

Google Fonts gives you 1,500+ free, production-ready font families. Learn how to pick them, embed them, pair them, and keep your pages fast.

Serif
Playfair
BOLD
Bebas
Script
Caveat
Mono
Roboto Mono
Step 1

What Google Fonts is, and why to use it

Google Fonts is a free library of open-source fonts you can drop into any website with a single <link> tag. No licensing, no hosting, no font files to download — just a URL that streams exactly the weights and characters you need.

Three ways to include a font

Pick one. The <link> version is the easiest and is what Google recommends. Use @import when you can't edit the HTML head (e.g. inside a CMS-managed stylesheet). 

<!-- Inside <head> — the recommended way -->
<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">
/* At the top of your stylesheet */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
/* Then use it anywhere */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

h1 {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
}
Always include fallback fonts. If Google Fonts fails to load, the browser falls back down the list. sans-serif or serif at the end ensures text stays readable no matter what.
Step 2

Add a Google Font to your page — step by step

Follow these 8 steps in order. You'll go from a blank page to a site using a custom font in about 3 minutes. Copy each snippet and paste it into your own file as you go.

1

Go to fonts.google.com and pick a font

Open fonts.google.com . Use the search bar or filters to find one you like. For this walkthrough we'll use Inter — a clean, modern sans-serif that works for almost anything.

Filter tip: on the left sidebar, pick Sans-serif for UI, Serif for articles, Display for big headlines, or Monospace for code.
2

Click into the font & select the weights you need

On the font's page, scroll down to the "Styles" section. Click + Get this font on Regular (400) and Bold (700). Those two cover 95% of websites — body text + headings. Skip the rest unless you know you'll use them.

Don't grab all 9 weights — every weight adds kilobytes. More weights = slower page = worse for mobile users on bad wifi.
3

Click "Get embed code" in the top-right sidebar

Once you've selected weights, a cart icon appears top-right. Click it, then click Get embed code. Google gives you two options: <link> (for HTML) and @import (for CSS). Choose <link>.

Why <link>: it loads faster than @import because browsers can download it in parallel with your CSS. Only use @import when you literally can't edit the HTML head.
4

Copy the three lines Google shows you

You'll see three <link> tags. The first two are preconnect hints that speed up loading. The third is the actual font. Copy all three. 

<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">
preconnect tells the browser "hey, go connect to fonts.googleapis.com early" — before it even knows it needs to. Saves 50–200ms.
5

Paste them inside your <head>

Open your index.html (or whatever your main HTML file is called). Paste the three lines above between the opening <head> tag and your existing <link rel="stylesheet"> for your own CSS. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My site</title>

  <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="styles.css">
</head>
Order matters: load Google Fonts before your own stylesheet. That way your CSS knows the font exists when it starts applying font-family.
6

Use the font in your CSS

Open styles.css (or whatever your stylesheet is called). Add font-family rules using the font name Google gave you. Wrap it in single quotes. 

/* styles.css */
body {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
}
Why the quotes? Multi-word font names ('Playfair Display', 'Roboto Mono') break without quotes. Single-word ones (Inter) work either way, but quoting everything is a safe habit.
7

Always add a fallback font at the end

If Google Fonts fails (bad wifi, ad blocker, offline), the browser falls back down the stack. Adding sans-serif or serif at the end guarantees your text always renders in something readable. 

body {
  /* Good — with fallbacks */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Bad — no fallback. If Google Fonts fails, text is unstyled. */
body {
  font-family: 'Inter';
}
Pro fallback: -apple-system, BlinkMacSystemFont falls back to the device's native UI font (San Francisco on Mac/iOS, Segoe on Windows). Users don't even notice the swap.
8

Save both files and reload your browser

Save index.html and styles.css. Hard-reload your browser tab (Cmd/Ctrl + Shift + R). Your page should now render in Inter.

If it didn't work: open DevTools → Network tab → reload → filter by "font". You should see a request to fonts.googleapis.com returning 200. If it's 404, the family name in the URL is misspelled.

Done — your site now uses a custom font 🎨

From here, experiment with heavier weights, italics, or mixing two fonts (one for headings, one for body). The rest of this tutorial covers which fonts pair well and how to load multiple families efficiently.

Bonus: set a CSS variable like --font-display: 'Playfair Display', serif; — then swap fonts globally by changing one line.
Step 3

A tour of 8 great Google Fonts

Every font below is loaded on this page. Hover to see them come alive — these are all production-tested choices you can use today.

Inter · Sans-serif · 9 weights
Hey there 👋
The default sans-serif for modern UI. Clean, neutral, ultra-readable at every size.
Playfair Display · Serif · 6 weights
Elegant.
Editorial serif for headlines, magazines, and luxury brands. Beautiful italic.
Poppins · Sans-serif · 9 weights
Friendly vibes
Geometric round sans with personality. Pairs well with almost anything.
Bebas Neue · Display · 1 weight
BIG HEADLINES
All-caps display font. Tall, narrow, dramatic — built for impact.
Lora · Serif · 5 weights
Tell me a story
Warm serif for long-form reading. Great for blogs, essays, and articles.
Space Grotesk · Sans-serif · 5 weights
Tech forward
Sharp modern sans with character. A favorite for startups and dev tools.
Caveat · Script · 4 weights
Handwritten!
A casual handwritten accent font. Use sparingly — for callouts, not body copy.
Roboto Mono · Monospace · 7 weights
const x = 42;
Clean monospace for code blocks, timestamps, and tabular data.
Step 4

Loading only the weights you need

Every weight you request is more bytes to download. The URL parameter :wght@400;700 tells Google Fonts to send just the 400 and 700 weights — typically all you need for body text + headings.

All 9 weights of Inter, side by side

100 Thin Typography is joy
300 Light Typography is joy
400 RegularTypography is joy
500 MediumTypography is joy
600 SemiBoldTypography is joy
700 Bold Typography is joy
800 ExtraBoldTypography is joy
900 Black Typography is joy

Requesting multiple families + weights

Chain families with &family=. Add italics with ital,wght@. 

<link href="https://fonts.googleapis.com/css2?
  family=Inter:wght@400;600;800
  &family=Playfair+Display:ital,wght@0,700;1,400
  &family=Roboto+Mono:wght@400;700
  &display=swap" rel="stylesheet">
family=Inter:wght@400;600;800
   → Inter at weights 400, 600, 800

&family=Playfair+Display:ital,wght@0,700;1,400
   → Playfair Display — roman 700 (0,700) + italic 400 (1,400)

&family=Roboto+Mono:wght@400;700
   → Roboto Mono at weights 400, 700

&display=swap
   → Show fallback font first, swap when Google font loads
      (prevents invisible text while loading)
Rule of thumb: Two weights per family is usually plenty. Body + bold. Any more and you're slowing the page down for minor stylistic gains.
Step 5

Pairing fonts that just work

A classic formula: use a display font for headings and a neutral sans-serif for body. Contrast is good — sameness is boring.

Editorial

Cities of the sky

Nairobi at dawn has a particular silver quality to it, as if the moon had spent the night dusting every windshield, every rooftop, every fence.

Playfair Display (heading) + Inter (body)
Tech startup

Ship faster, learn louder.

Our platform helps engineering teams go from commit to production in under 90 seconds, with automatic rollbacks, feature flags, and instant previews baked in.

Space Grotesk (heading) + Inter (body)
Hero marketing

LIMITED EDITION

Only 500 pieces. Hand-assembled in Berlin. Ships in a felt-lined walnut case with a lifetime warranty card.

Bebas Neue (heading) + Poppins (body)
Long-form reading

The last bookshop on Flatbush.

It took Marianne nineteen years to figure out what the store was for. Her grandmother had never told her. Her father had gestured vaguely at the shelves and said, "you'll know."

Lora (heading + body — warm & readable)
Shortcut: Google Fonts has a built-in pairing tool. fonts.google.com/knowledge
Step 6

Try it — live font playground

Pick a font, weight, and size. See how your text would look before you commit to anything.

Design is how it works.
Step 7

Typography rules

Do

  • Use 1–2 font families per page
  • Load only the weights you actually use
  • Always add display=swap to prevent invisible text
  • Include a system font fallback at the end of the stack
  • Preconnect to fonts.gstatic.com for speed
  • Use 16px+ for body text on mobile
  • Keep line length 50–75 characters
  • Pair a display font with a neutral body font

Don't

  • Load 8 different font families on one page
  • Request every weight (100–900) "just in case"
  • Use decorative script fonts for body copy
  • Forget the fallback — dropped connections happen
  • Set body text below 14px — it hurts readability
  • Pair two similar sans-serifs — no contrast
  • Use lowercase text in a font designed for ALL CAPS
  • Forget to test how fonts render on Windows vs. Mac
Cheat Sheet

The complete starter snippet

Copy this into any HTML project and you have a professional typography foundation with zero config. 

<head>
  <!-- Speed up Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

  <!-- Load Inter (400 + 700) and Playfair Display (700) -->
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Playfair+Display:wght@700&display=swap"
        rel="stylesheet">

  <link rel="stylesheet" href="styles.css">
</head>
/* styles.css */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #111;
}

h1, h2, h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* Tabular numbers for stats / prices */
.stat { font-variant-numeric: tabular-nums; font-weight: 700; }
Next: Browse all 1,500+ families at fonts.google.com — filter by category, pick weights, and copy the embed URL straight from the site.