How to use Google Fonts with Gatsby

First, install react-helmet-async and @rhysforyou/gatsby-plugin-react-helmet-async. These allow you to add things to the <head> of your pages.

npm install react-helmet-async @rhysforyou/gatsby-plugin-react-helmet-async

Then, add the @rhysforyou/gatsby-plugin-react-helmet-async plugin to your gatsby-config.js file:

// gatsby-config.js

module.exports = {
  plugins: [
    "@rhysforyou/gatsby-plugin-react-helmet-async"
  ]
}

You may need to restart the Gatsby development server (run gatsby develop again) in order to see the changes to your gatsby-config.js file.

Now, select a couple Google Fonts, click Embed, and copy the option.

Lastly, you’re ready to add this font embed code to your Gatsby page’s <head> using react-helmet-async:

// src/pages/index.js

import React from "react"
import { Helmet } from "react-helmet-async" // make sure to import Helmet

export default () => {
  return (
    <>
      <Helmet>
        {/* copy and paste the embed from Google Fonts: */}
        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet" />
      </Helmet>

      <div>
        the rest of the page...
      </div>
    </>
  )
}

Notice the added / at the end of the <link ... /> above. You’ll need to make this change to the code you copy and paste from Google Fonts.

This is because React requires tags that don’t have a closing tag (such as link) to be self-closing, with an added / (for example <img />, not <img>).