Using Web Fonts with Google Fonts

System fonts are fast and reliable, but they give every website the same appearance. Web fonts let you choose typefaces that match your brand — this is the point where the STO site starts to look genuinely designed rather than default.

What web fonts are

A web font is a font file hosted on a server that the browser downloads and uses when rendering a page. Unlike system fonts (pre-installed on the user’s device), web fonts require an HTTP request to load.

Google Fonts is the most widely used source of free, high-quality web fonts. It hosts thousands of fonts and provides simple embed code that works in any browser.

Selecting fonts on Google Fonts

Navigate to fonts.google.com and browse or search for fonts. For the STO site, you want:

A heading font with character — something that evokes the outdoor, established brand feel. Options: Playfair Display, Merriweather, Lora
A body font that is highly readable at small sizes. Options: Inter, Source Sans 3, Open Sans

When you click a font, you can select specific styles (weights and variants). Click “Get font” then “Get embed code” to receive the <link> tags.

Loading with the link method (HTML)

The recommended approach is to add <link> tags in the <head> of your HTML, before your stylesheet link:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Summit Trail Outfitters</title>

  <!-- Google Fonts — must come before your stylesheet -->
  <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=Playfair+Display:wght@700&family=Source+Sans+3:wght@400;600&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="style.css">
</head>

The rel="preconnect" links tell the browser to establish a connection to Google’s servers early, reducing the delay before the fonts start downloading.

The display=swap parameter at the end of the font URL tells the browser to use your fallback font immediately, then swap in the web font once it loads. This is the font-display: swap strategy and prevents invisible text during font loading.

Loading with @import (CSS)

The @import method places the font loading directive inside your CSS file. It must be the first line of the stylesheet:

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Source+Sans+3:wght@400;600&display=swap');

/* Rest of your stylesheet below */
body {
  font-family: 'Source Sans 3', system-ui, sans-serif;
}

@import is slightly less performant than the <link> method because the browser must download and parse the CSS file before it discovers and requests the fonts. Use the <link> method for production sites.

Applying the font

Once the font is loaded, use its exact name from Google Fonts in font-family, followed by your fallback stack:

h1, h2, h3 {
  font-family: 'Playfair Display', Georgia, serif;
}

body {
  font-family: 'Source Sans 3', system-ui, sans-serif;
}

Always include a fallback. If Google Fonts is unavailable (corporate firewalls, network issues, user privacy settings), the fallback font renders instead.

Selecting only what you need

Every weight and style you select adds to the download size. Only request the weights you will actually use:

/* This URL loads only 400 and 600 weight of Source Sans 3, and 700 of Playfair Display */
https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Source+Sans+3:wght@400;600&display=swap

Loading wght@100;200;300;400;500;600;700;800;900 for a font you only use at 400 and 700 adds unnecessary load time.

Performance considerations

Web fonts add HTTP requests and bytes. The browser must:

Discover the font is needed
Request the Google Fonts CSS file
Parse it to find the actual font file URLs
Request the font files
Apply them to the page

During steps 1–4, the browser may show a Flash of Unstyled Text (FOUT) — text rendered in the fallback font — or a Flash of Invisible Text (FOIT) — text hidden until the web font loads. display=swap causes FOUT, which is preferable to invisible text.

The rel="preconnect" tags reduce latency by establishing the DNS lookup and TCP connection early. On fast connections, users will rarely notice the font swap at all.

Variable fonts

Modern variable fonts contain the entire weight and style range in a single file, making them significantly smaller than loading multiple separate weight files. Google Fonts serves variable fonts when you request a range:

family=Source+Sans+3:wght@400..700

This loads a single variable font file covering weights 400 through 700, rather than two separate files for 400 and 700.

The analogy: loading a web font is like subscribing to a font delivery service. The font files live on Google’s servers. Every time a user visits your site, their browser downloads the fonts from those servers. This is fast and reliable for most users, but requires an internet connection — and each additional font weight is another delivery.

Exercise

Add Google Fonts to the STO site:

Go to fonts.google.com and select:
- Playfair Display — Regular 700 (for headings)
- Source Sans 3 — Regular 400 and SemiBold 600 (for body and labels)
Copy the <link> embed code and add it to the <head> of all four HTML files (index.html, tours.html, about.html, contact.html), before your <link rel="stylesheet">:

<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=Playfair+Display:wght@700&family=Source+Sans+3:wght@400;600&display=swap" rel="stylesheet">

Update your style.css to use the new fonts:

body {
  font-family: 'Source Sans 3', system-ui, sans-serif;
}

h1, h2, h3 {
  font-family: 'Playfair Display', Georgia, serif;
}

Open the browser. The first load may briefly show the fallback font before Playfair Display appears — this is expected. On repeat visits, the fonts are cached and load instantly.
Open DevTools Network tab, filter by “Font”, and reload the page. You should see the Google Fonts CSS file and the actual font files being requested.

Recap

Web fonts are downloaded from a server (e.g., Google Fonts) when the page loads — they are not pre-installed on the user’s device.
Use the <link> method in <head>, before your stylesheet, with rel="preconnect" tags for best performance.
Include display=swap in the font URL to prevent invisible text during loading (FOIT).
Always provide fallback fonts in your font-family stack.
Load only the weights and styles you use; variable fonts (range syntax) are more efficient than multiple fixed-weight files.

Lesson 06 completes the module with visual depth — box-shadow, text-shadow, and opacity to give the STO site a polished, layered appearance.