HTML CSS JavaScript Python Swift TypeScript SQL React

How to Use Google Fonts with CSS

What you’ll build or solve

You’ll add one or more Google Fonts to a web page and use them in CSS.

When this approach works best

This approach works best when you want a custom font without hosting font files yourself.

Learn CSS on Mimo

CAREER PATHFull-Stack Developer

Become a full-stack developer. Learn HTML, CSS, JavaScript, and React as well as NodeJS, Express, and SQL

Beginner friendly

COURSECSS

Master styling and layout with CSS. Learn selectors, flexbox, grid, animations, and responsive design

Beginner friendly

Use it when you:

Style a portfolio, landing page, or blog with a specific typeface.
Use one font for headings and another for body text.
Need specific weights like 400 and 700 for UI and headings.

Skip this approach when:

You must work offline or behind strict network rules. Self-hosting font files can be a better fit.
You need pixel-perfect typography across many environments. Font rendering can vary by OS and browser.

Prerequisites

An HTML file you can edit
A CSS file or a <style> tag
The name of the font you want from Google Fonts

Step-by-step instructions

Step 1: Add the font to your page

You have two common ways to load Google Fonts. Use the one that fits your setup.

Option A: Add a `<link>` in your HTML `<head>` (most common)

Copy the stylesheet link from Google Fonts and paste it into your <head>.

PHP

Open in Mimo

<!doctype html>
<htmllang="en">
<head>
<metacharset="utf-8">

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

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

<title>Google Fonts Demo</title>
</head>
<body>
<h1>Hello</h1>
<p>Text using Inter.</p>
</body>
</html>

Option B: Import the font in your CSS file

This works when you only want to touch CSS, but it can be slower than using a <link> in many setups.

CSS

Open in Mimo

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

What to look for

display=swap helps text stay visible while the font loads.
The preconnect lines can speed up font loading by opening connections early.

Step 2: Apply the font with `font-family`

Once the font is loaded, use font-family in CSS to apply it.

CSS

Open in Mimo

body {
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

If you loaded multiple weights, you can switch weights with font-weight.

CSS

Open in Mimo

h1 {
  font-weight:700;
}

p {
  font-weight:400;
}

What to look for

Put quotes around font names with spaces, such as "Open Sans".
Always end with fallbacks like sans-serif so text stays readable if the font fails to load.

Examples you can copy

Example 1: One font for the whole page

Open in Mimo

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

CSS

Open in Mimo

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

Example 2: Headings in one font, body in another

Open in Mimo

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

CSS

Open in Mimo

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

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

Example 3: Only load the weights you use

Open in Mimo

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

CSS

Open in Mimo

.card-title {
  font-family:"Roboto",Arial,sans-serif;
  font-weight:700;
}

.card-body {
  font-family:"Roboto",Arial,sans-serif;
  font-weight:400;
}

Common mistakes and how to fix them

Mistake 1: Loading the font but never using `font-family`

What you might do:

Open in Mimo

<linkhref="https://fonts.googleapis.com/css2?family=Inter&display=swap"rel="stylesheet">

CSS

Open in Mimo

p {
  font-size:18px;
}

Why it breaks:

The font loads, but nothing tells the page to use it.

Correct approach:

Set font-family on the elements you want to change.

CSS

Open in Mimo

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

Mistake 2: Using a weight you didn’t load

What you might do:

Open in Mimo

<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400&display=swap"
rel="stylesheet"
>

CSS

Open in Mimo

h1 {
  font-family:"Inter",Arial,sans-serif;
  font-weight:700;
}

Why it breaks:

The browser can’t use a weight you didn’t request, so the result may look wrong or unchanged.

Correct approach:

Load the weights you use.

Open in Mimo

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

Mistake 3: Breaking the font name in CSS

What you might do:

CSS

Open in Mimo

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

Why it breaks:

Some fonts require quotes, especially names with spaces, and typos are easy to miss.

Correct approach:

Match the name exactly and use quotes when needed.

CSS

Open in Mimo

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

Troubleshooting

If the font doesn’t change, confirm the Google Fonts <link> is in <head> and your CSS sets font-family.
If the request shows a 404 in DevTools Network, re-copy the URL from Google Fonts and check for missing characters.
If weights look the same, confirm you loaded the weights in the URL and you’re using font-weight values that exist for that font.
If fonts work on one page but not another, check that the same <link> or @import is included for that page too.
If nothing loads on a work network, your connection may block fonts.googleapis.com or fonts.gstatic.com. Try a different network or self-host fonts.

Quick recap

Load the font with a Google Fonts stylesheet URL using an HTML <link> or CSS @import.
Use font-family to apply it to your text.
Add fallbacks like Arial, sans-serif.
Request the font weights you actually use.
Debug with DevTools Network when the font doesn’t load.

Join 35M+ people learning for free on Mimo