🔟 Ten Quick Steps to Set Up Google Fonts within a Gatsby Project

If you're looking to add custom fonts to your Gatsby project, here is a quick run down on how to get up and running! 😄

I recently started looking into how I could integrate Google Fonts into my Gatsby project. I found that there's quite a bit of documentation regarding what plugins to use but it wasn't clear on what to do after you install them and how to utilize your new fonts.

❗A few prerequisites, you have:

• A Gatsby project set up (check out the quick-start docs if you need to do this)
• styled-components set up within your Gatsby project (check out the Gatsby styled-components docs if you need to do this)
• Terminal with npm access (download Node here if you need this)
• An editor of your choice (I use and will reference VS Code)

Now let's get to the fun part and add Google Fonts to our project! 😃

1️⃣ Download your favorite font from Google Fonts

I chose to download Inter and will reference that throughout the rest of these steps.

2️⃣ Install gatsby-plugin-prefetch-google-fonts plugin

To install this, from your Terminal window run npm install --save gatsby-plugin-prefetch-google-fonts.

3️⃣ Update gatsby-config.js

Navigate in VS Code to the gatsby-config.js file. Insert this snippet at the end of plugins to utilize our newly installed plugin:

{
  resolve: `gatsby-plugin-prefetch-google-fonts`,
  options: {
    fonts: [
      {
        family: 'Inter',
        variants: ['400', '400i', '700', '700i'],
        subsets: ['latin-ext'],
      },
    ],
  },
},

4️⃣ Create static and fonts Folders

In the src/ folder, create a static folder; and inside of the static folder, create a fonts folder

5️⃣ Add Google Fonts Files to Project

Move the Google Fonts downloaded Inter TTF (*.ttf) files into the fonts folder.

6️⃣ Create and Update fonts.css File

In the fonts folder, create fonts.css and create the following font-face for each TTF file:

@font-face {
  font-family: 'Inter Extra Light';
  src: url('./Inter-ExtraLight-slnt=0.ttf') format('truetype');
  font-style: normal;
}

Note: You want to update the font-family and url in the snippet above to point to each TTF file.

7️⃣ Create styled Folder and Associated Files

Create one folder: in the src/ folder, create a styles folder with a theme.js file and a GlobalStyles.js file.

8️⃣ Update theme.js and GlobalStyles.js Files

In the theme.js file, add the following:

const theme = {
  font: {
    primary: `'Inter Black'`,
  },
}

And in the GlobalStyles.js file, add the following:

import { createGlobalStyle } from 'styled-components';

const normalize = `
  /*! modern-normalize | MIT License | https://github.com/sindresorhus/modern-normalize */html{box-sizing:border-box}*,::after,::before{box-sizing:inherit}:root{-moz-tab-size:4;tab-size:4}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol'}hr{height:0}abbr[title]{text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:SFMono-Regular,Consolas,'Liberation Mono',Menlo,Courier,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{padding:0}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}
`;

const GlobalStyles = createGlobalStyle`
  ${normalize};
  body {
    font-family: ${(props) => props.theme.font.primary};
  }
`;

export default GlobalStyles;

Note: Read more about createGlobalStyle here.

9️⃣ Update Layout

Within layout.js, add the following:

import React from 'react';
import PropTypes from 'prop-types';
import { ThemeProvider } from 'styled-components';

import theme from '../styles/theme';
import GlobalStyles from '../styles/GlobalStyles';
import '../static/fonts/fonts.css';

const Layout = ({ children }) => (
  <ThemeProvider theme={theme}>
    <>
      <GlobalStyles />
      {children}
    </>
  </ThemeProvider>
);

Layout.propTypes = {
  children: PropTypes.node.isRequired,
};

export default Layout;

Note: This provides access to the theme via ThemeProvider.

🔟 Verify Font Updates

Run gatsby develop in Terminal and verify the Google Fonts are now applied!

🚀 Enjoy!

Hopefully this helps you out if you have struggled with trying to add custom fonts to your Gatsby project. Feel free to reach out to me in the comments or on Twitter (@kyleh919) with any questions you have!

Comments

[Rajitha Gunathilake]

i was looking for this yesterday
thanks 👌👌

[Kyle Hunter]

So glad to hear this helped! 😄