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 
Top comments (2)
You know if this helps with font render flash Rich?
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.