gatsby best way to load custom fonts code example

Example: typeface in gatsby

$ npm install typeface-rubik
// Configuration
// Now we’ll require the font in our gatsby-browser.js,
// where we interact with the client-side of Gatsby.

// gatsby-browser.js
require("typeface-rubik");
// And we can go ahead and call the font in our stylesheet/styled-components like we normally would.

// src/styles/main.css
body {
  font: 400 18px Rubik, sans-serif;
}