March 29, 2020
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 <link> 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>
).
Tufts Meal Plan Wrapped
Mar 2, 2024
Building an e-ink picture frame that displays an iCloud photo album
Jan 9, 2024
2023 in review
Jan 5, 2024
Subscribe to my newsletter for a monthly round-up of new blog posts and projects Iām working on!