How to use Google Fonts

I am a huge proponent of using System Fonts, which are fast, lightweight and work great, but sometimes you need to be a little fancy.

You need a specific font that will make your designs look good.

Maybe a nice font like Slabo, Lato or Raleway.

Google provides, as part of its numerous services, a tool called Google Fonts, which as of September 2026 hosts almost 2,000 font families (992 when I first wrote this post in 2020).

The interface is a bit overwhelming and as a person not expert in fonts, I am definitely confused at which font should I choose.

I typically search for “best google fonts” on Google and I look at the articles I get, to get an idea of how a font could look like. Looking at dozens of fonts on Google Fonts is not ideal for that, and some sites make it easy with colors, like on this post.

Let’s take one of the fonts I used in one of my websites: Press Start 2P, a pixelated font that looks like an old video game.

It’s a great font for a retro website. I used it in my Web Platform course homepage, to which I wanted to give a computer-y look.

On the font page, you can see how each character is rendered, with the full set of uppercase and lowercase letters, numbers and symbols.

Scrolling down you can see who is the designer, and an important part: the license. In this case the page says

You can use them freely in your products & projects - print or digital, commercial or otherwise. However, you can’t sell the fonts on their own.

which grants us a lot of permissions.

We can use the font as we want, even in a commercial project, but we can’t resell it.

At the bottom we have an interesting section that lists which fonts are often paired with this one. For Press Start 2P the suggestions are Open Sans, Roboto, Roboto Slab, Lobster and Ubuntu.

With fonts I try to be as conservative as possible because most of the times I don’t know what I’m doing and seeing what other people do and copying the most reasonable choice is a good strategy.

Now you can press the “Download family” link on the top right of the page to download the font TTF file, which you can install on your computer and use it as a font in your desktop programs.

But you don’t need to do so to use the font on a website.

What you can do is get the embed code from the specimen page. Press Get font, then Get embed code.

The embed page gives you the code for your project: a link element for the HTML, and the CSS rule to apply the font family.

So in this case what you need to do is to add this HTML:

<link
  href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap"
  rel="stylesheet"
/>

and then this CSS:

body {
  /* use your favorite selector here */
  font-family: 'Press Start 2P', cursive;
}

We have a fallback font in case the font can’t be loaded, or takes too much to load.

The display=swap parameter in the URL sets font-display: swap on the generated @font-face rules: the browser renders the text with the fallback font right away, and swaps in Press Start 2P when it arrives. Without it, some browsers keep the text invisible for up to a few seconds while the font loads.

The embed code Google generates today also puts two extra tags before the stylesheet: <link rel="preconnect" href="https://fonts.googleapis.com"> and <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>. The CSS comes from the first domain, the font files from the second, and the preconnect hint tells the browser to open those connections early instead of waiting until it discovers the URLs.

Another way to include the font is using the @import directive in the CSS, so you don’t need to use the link attribute in the HTML - all is in the CSS file:

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

Use the /css2 endpoint rather than the older /css?family=... one. It is the current version of the API and it supports variable fonts, so you can ask for a weight range with family=Roboto:wght@400..700. display=swap is not a default there either, you add it to the URL yourself.

But this approach has one limitation: it’s slower. If the font is linked in the HTML, the browser will make a request to the font URL as soon as it reads the HTML.

If the font is linked in the CSS, the browser first has to make a request to load the CSS, then it can make a request to load the font URL.

And a few milliseconds lost here can make the difference between a page that loads instantly with the right font, and a page that first loads with the fallback font, and then loads the correct font when it’s available.

What about the GDPR?

Loading fonts from fonts.googleapis.com means every visitor’s browser sends a request, with their IP address, to Google. In January 2022 a court in Munich ruled that doing this without consent violates the GDPR, and ordered a site owner to pay 100 euros in damages to a visitor. Since then many European sites stopped loading Google Fonts from Google.

The fix is easy: self-host the font. Press “Download family” on the specimen page, put the font files on your own server, and load them with @font-face. I explain how in the CSS fonts guide. The license is the same, and you also skip the extra DNS lookup and connection to a third-party domain, so the page loads faster too.

Want me to talk about your product? You can sponsor this site.