Google fonts in Gatsby

You might have come across several plugins to change the font-family of your app and have tried using @font-face in CSS. It is all mess! You can now change the font of your app or have your custom font in seconds with this beautiful plugin gatsby-plugin-google-fonts

Let's take a very short ride 🛴

First, save this plugin to your project using yarn or npm

yarn add gatsby-plugin-google-fonts
// or
npm install gatsby-plugin-google-fonts --save

Second, In your gatsby-config.js file, add this to the array of plugins.

    {
      resolve: `gatsby-plugin-google-fonts`,
      options: {
        fonts: [
          `Lato`,
        ],
        display: 'swap'
      }
    }

Here, in fonts array, it works even if you specify the font name in lowercase (like lato) or title case (like Lato). Now, you can use the css property font-family and set it to the font (Lato) you just setup using the plugin.

body {
  font-family: 'Lato'
}

That's it.

Save it and see the magic 💫