🔟 Ten Quick Steps to Set Up Google Fonts within a Gatsby Project
Tags: gatsby, tutorial, react, javascript
Published: 2020-07-28 12:44:27

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](https://www.gatsbyjs.org/docs/quick-start/) if you need to do this)
- styled-components set up within your Gatsby project (check out the [Gatsby styled-components](https://www.gatsbyjs.org/docs/styled-components/) docs if you need to do this)
- Terminal with npm access (download Node [here](https://nodejs.org/en/) if you need this)
- An editor of your choice (I use and will reference [VS Code](https://code.visualstudio.com))

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](https://fonts.google.com/specimen/Inter?query=inter) and will reference that throughout the rest of these steps.

### 2️⃣ Install [gatsby-plugin-prefetch-google-fonts](https://www.gatsbyjs.org/packages/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:
``` javascript
{
  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:
```css
@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:
```javascript
const theme = {
  font: {
    primary: `'Inter Black'`,
  },
}
```

And in the `GlobalStyles.js` file, add the following:
```javascript
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](https://www.gatsbyjs.org/docs/styled-components/#creating-global-styles).

### 9️⃣ Update Layout
Within `layout.js`, add the following:
```javascript
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](https://styled-components.com/docs/advanced#theming).

### 🔟 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](https://twitter.com/kyleh919)) with any questions you have!