Fonts best practice for loading fonts

[ahansson89]

What is the best way to load fonts in Gatsby? I currently just import the typeface into my component like this:

import "typeface-pacifico"
import "typeface-raleway"
import "typeface-open-sans"

I wonder if there is a better way, as i get Minimize Critical Requests Depth in Lighthouse.

[LekoArts]

Hi! 👋
Using self-hosted fonts is better than Google fonts, so that's a good start.

You should import the fonts in your Layout component (the one that wraps all pages). Other than that you don't have to do anything else. You could also preload them (as seen here) but I personally don't see the need for that.

Slightly unrelated note:
It's pretty common to use maximum two typefaces (from a design standpoint) so maybe you can even get rid of one.

[ahansson89]

Thanks @LekoArts!

This is how I ended doing it in a dynamic way in gatsby-ssr.js. If anyone wants to turn it into a gatsby plugin, feel free.

const React = require('react')
const fs = require('fs')

exports.onRenderBody = ({ setHeadComponents }) => {

  const files = getFilesFromPath("./public/static", ".woff2")
  const preload = [
      'raleway-latin-400',
      'raleway-latin-700',
      'rochester-latin-400',
      'source-sans-pro-latin-400',
      'source-sans-pro-latin-700'
    ]

  setHeadComponents([
    files.map((file, i) => {
      return preload.map((font, key) => {
        const fileBeginning = file.split('-').slice(0,-1).join('-')
        if (fileBeginning === font) {
          return(
            <link
      				key={key}
      				rel='preload'
      				as='font'
      				type='font/woff2'
      				crossOrigin='anonymous'
      				href={`/static/${file}`}
      			/>
          )
        }
      })
    })
  ])
}

function getFilesFromPath(path, extension) {
  let dir = fs.readdirSync( path );
  return dir.filter( elm => elm.match(new RegExp(`.*\.(${extension})`, 'ig')));
}

[KyleAMathews]

You might be interested in my proposal here: #14281