DEV Community

loading...

Load a custom font in Gatsby

Richard Haines
Writing docs @prisma I love to create content and fun experiences while exploring new technologies
・1 min read

To load a custom font in a Gatsby project you will need to create a gatsby-ssr.js file and use the onRenderBody function. This will allow you to append a link to the sites head.

gatsby-ssr.js

const React = require("react");
export const onRenderBody = ({ setHeadComponents }) => {
  setHeadComponents([
    <link
      rel="stylesheet"
      href="https://indestructibletype.com/fonts/Jost.css"
      type="text/css"
      charset="utf-8"
    />
  ]);
};

// Can then be accessed like: font-family: Jost in your code
Enter fullscreen mode Exit fullscreen mode

Discussion (2)

Collapse
spences10 profile image
Scott Spence

You know if this helps with font render flash Rich?

Collapse
studio_hungry profile image
Richard Haines Author

I'm not sure tbh. I don't think so as it's not actually hosted locally, it's just fetched from the url. To counter the flash I installed the font in the project.