1. home
  2. blog
  3. how to make loading fonts faster on gatsby

How to make loading fonts faster on Gatsby

December 14, 2020

Why to use fonts prefetching?

You need to preload fonts that you are using to decrease time to FMP(first meaningful paint).

How to use it?

Earlier was very popular plugin gatsby-plugin-prefetch-google-fonts. But now it’s deprecated and may cause this error:

ENOENT: no such file or directory, stat '.cache/google-fonts//fonts'

Solution

You can replace gatsby-plugin-prefetch-google-fonts with gatsby-plugin-preload-fonts. And gatsby-plugin-preload-fonts is the official plugin for fonts preloading from Gatsby. The main difference from old plugin is that it loads fonts by scraping your site, not from the gatsby-config.

  1. Remove old plugin
  2. Add to css or template import of your fonts
  3. Install plugin using the steps from official guide:
npm install gatsby-plugin-preload-fonts

then add scraping command to package.json:

{
  "scripts": {
    "preload-fonts": "gatsby-preload-fonts"
  }
}

add plugin to gatsby-config:

module.exports = {
  plugins: [`gatsby-plugin-preload-fonts`],
}

run your site on localhost:

gatsby develop

and then start scraping:

npm run preload-fonts

All scraping results would appear in console and saved in font-preload-cache.json.

Then, reload your develop instance and enjoy!


Subscribe for updates

Join 100+ subscribers and get news about
themes, releases and special offers

Relative posts:

Gatsby Blog ThemesGatsby Documentation ThemesGatsby Portfolio ThemesGatsby Landing ThemesGatsby Free ThemesGatsby Premium ThemesGatsby Starters
GatsbyTemplates.
Free and premium gatsby themes.
TwitterYouTube
Copyright © 2021 GatsbyTemplates.io. By using this site, you’re agreeing to our Terms of Service and Privacy Policy. We are listing free and premium templates. Terms of Service and technical support only applies to premium templates that were made by GatsbyTemplates team.