EN

Tips・Level up your design

Change the face of your text with Google Fonts

The same text can feel completely different just by changing the font (the shape of the letters). Here's how to bring Google Fonts—hundreds of them, free—into your page with two copy-and-pastes.

Your computer comes with a few fonts (the shapes of letters) built in, but not that many kinds. On the web, though, there’s a place that hands out fonts you can use for free: Google Fonts. Round letters, handwritten styles, crisp serif faces—you can pick the “face” of your page’s text to match the mood.

1. Choose a font

First, open the site and look for a font you like.

Open Google Fonts

The Google Fonts listing screen. A search box at the top, and below it the same sample text shown in various fonts like Roboto, Geist Pixel, and Yuyu, each with a different look
The same sample text lines up in a completely different look for each font. Round ones, square ones, handwritten ones—just browsing is fun.

To look for Japanese fonts, choose “Japanese” from Filters and only the ones that support Japanese will line up. Once you’ve picked a font you like, head to “Get font” → “Get embed code” near the top right.

You’ll get some <link ...> code that looks like this (choose the <link> version, not @import). Copy it and paste it inside your HTML’s <head>.

<head>
  <meta charset="UTF-8" />
  <title>My page</title>

  <!-- ↓ Paste the lines you copied from Google Fonts here -->
  <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=Kosugi+Maru&display=swap" rel="stylesheet" />
</head>

Of the 3 lines, the top 2 tell the browser “go ahead and connect now” to speed up loading. Even if you don’t understand them, it’s fine to just paste them in. The key is don’t delete the 2nd line—the font itself is delivered from this fonts.gstatic.com.

Now the font is ready to load into your page. The look hasn’t changed yet. Telling it “please use this” in CSS is the final step.

3. Write it into font-family in your CSS

On the same embed-code page, there’s also a line telling you “use it like this.” Move that over into your CSS.

body {
  font-family: "Kosugi Maru", sans-serif;
}

Save it and look at the browser—the shape of the letters should have changed. Write it on body for the whole page, or on h1 for just the headings; you can choose the spot too.

You can choose the weight (thickness) too

Many fonts let you choose the weight (thickness) in several steps while keeping the same shape. When you build the embed code on Google Fonts, add the weights you want to use, like “Regular 400” or “Bold 700,” and they get included in the <link> URL. On the CSS side, you switch with font-weight.

For example, to load the regular and bold of Noto Sans JP, which has 9 weights—

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet" />
h1 {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700; /* Use the bold weight you loaded */
}
TipsRecommended Google FontsNot sure which font to choose? Here are our recommendations by type, with samplesCSSChoose a fontFor how to write the font-family property itself, see this lesson in the CSS course

Summary

  1. Google Fonts is a treasure trove of free web fonts
  2. Paste a <link> into your <head> to load the font
  3. Write the name into font-family in your CSS, and only then does it take effect

Once you settle on one favorite font, building pages gets a lot more fun.

FAQ

What if the font loads but nothing changes?
Check that the name you wrote in font-family matches Google Fonts' spelling exactly. Names with spaces are wrapped in quotes, like "Kosugi Maru". Also check that the link tag is inside the head.
How do I find fonts that support Japanese?
In Google Fonts' Filters, choose "Japanese" under Language to narrow the list to fonts that support Japanese.
Does loading lots of fonts make the page heavy?
Yes. Japanese fonts especially have many characters and large files, so we recommend limiting yourself to 1 or 2 per page.
Can I use Google Fonts for free on commercial sites too?
Yes. All Google Fonts are provided under open-source licenses and are free for personal and commercial use alike. No credit line is required.

Popular tips