DEV Community


Add Google Fonts to a Gatsby project

edwinboon profile image Edwin Boon ・1 min read

So yesterday I ran in to the issue that I wanted to add some Google Fonts to a Gatsby Project but using the


give us some warnings in the console. Its considered bad practice.

To add Google Fonts to your project is actually pretty simple.

First install the gatsby-plugin-prefetch-google-fonts

yarn add gatsby-plugin-prefetch-google-fonts

or use npm

npm install gatsby-plugin-prefetch-google-fonts --save

And now we are already half way trough. Next we need to add the following code to our gatsby-config.js

    resolve: `gatsby-plugin-prefetch-google-fonts`,
    options: {
    fonts: [{
            family: `Lato`,
            variants: [`400`, `700`]

And voila we are done. We now can use the Lato font in our project and with every new build this font will be pre-fetched.


Editor guide
norbertb29 profile image
Norbert Bartos

Thanks for the good tip Edwin. I was in the same boat with the Google Fonts, it slowed my site load time significantly and I had to do some investigation.

Alternatively you can use Typefaces package which contains most of the Google Fonts and it helps to serve your fonts from your server (which based on the package creator's research is faster) and you don't have to bother with font-faces. You just have to import the font package in your gatsby-browser file.

edwinboon profile image
Edwin Boon Author

Your welcome Norbert and thanks for the alternative. I will have a look into that package.

thebiltheory profile image

⚠️ gatsby-plugin-prefetch-google-fonts is no longer maintained and has been achieved.

Plus it's causing a bug during a build.