Adding Bootstrap & Google Fonts To Your Gatsby Projects

When I started working on Gatsby Projects, I took me a while to figure out how to handle Bootstrap & Google font inclusion to various types of projects. It turns out, it wasn’t as difficult as I thought. So here are the few basic steps to get you going:

For Bootstrap

1) Install Bootstrap Module via NPM

Start by installing bootstrap and react-bootstrap via the CLI like so (this should be done in your Gatsby project’s root directory:

npm i react-bootstrap bootstrap

2) Set up gatsby-browser.js file

Create a gatsby-browser.js file (if you don’t have that already). This file will contain your import statement for Bootstrap like so:

import “bootstrap/dist/css/bootstrap.min.css”

And that’s it! You’re ready to start using Bootstrap in your Gatsby Project.

For Google Fonts

1) Install Gatsby plugin for Google Fonts

A simple Gatsby plugin for Google fonts should get everything up and running for you in time. Run in this on your Gatsby project’s root folder like so:

npm install gatsby-plugin-google-fonts

2) Set up gatsby-config.js file

Set up your Gatsby config file to adopt the installed plugin. You can specify various fonts and weights like so:

module.exports = {
    plugins: [      
        {
            resolve: `gatsby-plugin-google-fonts`,
            options: {
                fonts: [
                    `poppins:300,400,500,600,700`       
                ], display: 'swap'       
            }
        }
    ]
}

And that’s it! You’re ready to start using Google fonts in your Gatsby Project.