Enea Xharja

Using Google Fonts in Gatsby

Google Fonts is a great resource for adding beautiful fonts to your website. Adding fonts to a Gatsby project is as easy as installing the gatsby-plugin-google-fonts plugin:

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

Then, add your favorite fonts to your gatsby-config.js file:

module.exports = {
  siteMetadata: {
    title: `I like Google Fonts`,
  },
  plugins: [
    {
      resolve: `gatsby-plugin-google-fonts`,
      options: {
        fonts: [`Roboto:300,300i,400,400i,700`],
        display: 'swap',
      },
    },
  ],
};

In the example above, I am using display: swap. The font-display property defines how font files are loaded and displayed by the browser. swap tells the browser to use the fallback font to display the text, until the custom font has fully downloaded (aka “flash of unstyled text”).

If you are looking for inspiration or help in choosing the right fonts for your project, make sure to check out Google Fonts and FontPair.

Updated on December 06, 2020

Tagged with: gatsby, snippets


Profile picture

Hey there! I'm Enea, a web developer currently working at eqolot. Welcome to my little corner of the web, where I share my open collection of notes, code snippets, and resources on topics that interest me.

© 2021 Enea Xharja