How to Add Multiple Google Fonts in HTML & CSS with Video Tutorial

Hey my friend! Today we learn together how to add multiple Google Fonts in HTML & CSS to make your website look super clean, beautiful, and professional — with video tutorial in Khmer!

Using Google Fonts is 100% free and very easy. Let's get started step-by-step!

Watch Video Tutorial (Khmer)

Watch video first to see how to select and embed multiple Google Fonts in VS Code:

1. Steps to Get Multiple Google Fonts

Go to the official Google Fonts Website.
Search for fonts you want (for example: Outfit, Roboto, and Fira Code).
Click on font weights you like (Regular 400, Bold 700) to add them into your selection bag.
Click Get embed code button at top right corner.
Choose between <link> tag (see MDN Link Tag Guide) or @import CSS rule.

2. Method 1: Embed HTML `<link>` Tag (Recommended)

Paste this code inside your HTML <head> section:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Multiple Google Fonts Demo</title>

  <!-- Preconnect to Google Fonts servers for fast loading -->
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

  <!-- Single combined link for Outfit and Fira Code fonts -->
  <link
    href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600&family=Outfit:wght@400;700&display=swap"
    rel="stylesheet"
  />

  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <h1>Welcome to Web Dev!</h1>
  <p>This is paragraph text styled with Outfit font.</p>
  <code>console.log("Styled with Fira Code!");</code>
</body>
</html>

3. Method 2: Embed CSS `@import` Rule

If you want to keep all font imports inside your style.css file:

/* At very top line of style.css */
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600&family=Outfit:wght@400;700&display=swap');

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

h1 {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
}

code {
  font-family: 'Fira Code', monospace;
}

4. How to Use Fonts in CSS

After embedding fonts, set font-family property for different elements in CSS:

/* Body text uses Outfit font */
body {
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
}

/* Headings use bold Outfit font */
h1, h2, h3 {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
}

/* Code snippets use Fira Code monospace font */
code, pre {
  font-family: 'Fira Code', monospace;
}

Rendered Output Preview:

Heading 1 Styled with Custom Font

This paragraph is styled cleanly with a modern Google Font (Outfit / Inter) for smooth readability.

const greeting = "Code snippets use Fira Code / monospace font!";

Bonus Tips for Multiple Google Fonts

Here are 3 secret bonus tips for fast loading and clean design:

Tip 1: Combine All Fonts in 1 Single Link Request!

Never copy 3 separate <link> tags for 3 different fonts! Google Fonts allows you to combine multiple fonts in one URL:

family=Outfit:wght@400;700
&family=Fira+Code:wght@400

Combining them into 1 link reduces HTTP requests so your web page loads much faster!

Tip 2: Always Provide Fallback Fonts!

Always add fallback font like sans-serif, serif, or monospace at end of font-family:

font-family: 'Outfit', sans-serif; /* fallback to browser default sans-serif if offline */

Tip 3: Use `display=swap` to Prevent Invisible Text

Google Fonts includes &display=swap in URL by default. This makes text show instantly with default font while Google Font is downloading, preventing blank invisible text on slow internet!

💡 Next Lesson: Optimize your HTML editing workflow with Essential VS Code Extensions for Modern HTML & Frontend Development!

Happy coding! Try adding your favorite Google Fonts to your next project!