Using Google Fonts

Google Fonts is a free library of fonts that you load from Google’s servers.

Adding a font

1. Choose a font on the Google Fonts site and select the weights you need.
2. Copy the <link> tags it gives you into the <head> of your page.
3. Use the name in font-family.

1
2
3
4
5

<head>
  <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=Inter:wght@400;700&display=swap" rel="stylesheet">
</head>

1
2
3

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

The display=swap at the end of the address is the same idea as font-display: swap: show the fallback first.

Keep it fast

• Pick only the weights you use. wght@400;700 loads two. Loading every weight loads more data.
• Always keep a fallback after the font name.
• Do not load many families. Two is plenty for most sites.

Think about privacy

Loading from Google’s servers sends the visitor’s IP address to Google, and some privacy rules, notably in Europe, treat that as personal data. If this applies to your site, you can download the font files and host them yourself with @font-face, as in Web Fonts. Many Google fonts are open source and allow this.