loading...

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

@import 

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.

Posted on May 5 by:

edwinboon profile

Edwin Boon

@edwinboon

32 y/o Fullstack developer @mijndomein.

Discussion

markdown guide
 

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.

 

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