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.

--

--

--

Full Stack Engineer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Functions and Game HW

TESTTTT -2

SRE: Resiliency: Bulkheads in Action — Using JS

Grand fashions customer care number/8584892730//7001340188/Grand fashions customer care…

8 JavaScript debugging tools for 2018 and beyond

Frontend Development: Choosing Libraries the right way

Algorithms and Data Structures Part III

Chat System by Rust and gRPC-Web

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Chigozie Orunta

Chigozie Orunta

Full Stack Engineer

More from Medium

Content Ignite release v.1.0 Wordpress plugin for Publishers

Are HTML Static Site Generators a Good Match for Your Company?

GitLab for Social Media Posting and Scheduling? (Integrating Linkedin — Part 2)

Git Bisect, a must-have on your toolset