DEV Community

Pavan C
Pavan C

Posted on β€’ Edited on

4 1

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
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 πŸ’«

Top comments (0)

Cloudinary image

Zoom pan, gen fill, restore, overlay, upscale, crop, resize...

Chain advanced transformations through a set of image and video APIs while optimizing assets by 90%.

Explore

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay