DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Richard Haines
Richard Haines

Posted on

Load a custom font in Gatsby

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

Top comments (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.

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.