home

Load a custom font in Gatsby

Word count icon

33 words

Reading time icon

1 minutes

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

JavaScript icon
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