HtmlHow-ToBeginner · 3 min read

How to Add Google Fonts in HTML: Simple Steps

To add Google Fonts in HTML, include a <link> tag in the <head> section of your HTML that points to the Google Fonts stylesheet URL. Then, use the font family in your CSS with the font-family property to apply the font to your text.

📐

Syntax

Use the <link> tag inside the <head> of your HTML to load the font stylesheet from Google Fonts. Then, in your CSS, use font-family to apply the font.

<link> tag: Loads the font from Google Fonts.
href attribute: URL to the font stylesheet.
font-family: CSS property to set the font on elements.

html

<link href="https://fonts.googleapis.com/css2?family=Font+Name&display=swap" rel="stylesheet">

<style>
  selector {
    font-family: 'Font Name', fallback-font, sans-serif;
  }
</style>

💻

Example

This example shows how to add the 'Roboto' font from Google Fonts and apply it to the whole page.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Google Fonts Example</title>
  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Roboto', Arial, sans-serif;
      font-size: 1.2rem;
      margin: 2rem;
    }
  </style>
</head>
<body>
  <h1>Hello, this is Roboto font!</h1>
  <p>Google Fonts makes it easy to use custom fonts on your website.</p>
</body>
</html>

Output

A webpage with a heading and paragraph text displayed in the Roboto font.

⚠️

Common Pitfalls

Common mistakes when adding Google Fonts include:

Not placing the <link> tag inside the <head> section.
Using the wrong font family name in CSS (it must match exactly as shown on Google Fonts).
Forgetting to include fallback fonts in font-family for better browser support.
Not using display=swap in the URL, which helps text show quickly while the font loads.

html

<!-- Wrong: link tag outside head -->
<body>
  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</body>

<!-- Right: link tag inside head -->
<head>
  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>

📊

Quick Reference

Summary tips for adding Google Fonts:

Always put the <link> tag in the <head>.
Use the exact font family name from Google Fonts in CSS.
Include fallback fonts like sans-serif for safety.
Use display=swap in the font URL for better loading.

✅

Key Takeaways

Add Google Fonts by placing a tag in the HTML with the font URL.

Use the exact font family name in CSS's font-family property to apply the font.

Always include fallback fonts for better browser compatibility.

Use display=swap in the Google Fonts URL to improve font loading behavior.

Keep the tag inside the section to ensure fonts load correctly.