DEV Community

loading...

Google fonts in Gatsby

chilupa profile image Pavan Chilukuri Updated on ・1 min read

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
Enter fullscreen mode Exit fullscreen mode

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

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

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'
}
Enter fullscreen mode Exit fullscreen mode

That's it.

Save it and see the magic 💫

Discussion

pic
Editor guide