How to Add Google Font into React Applications

Photo by Natalia Y on Unsplash

Introduction

I’m recently re-learning React framework as it was 3years ago since the last time I use React for a production application.

In the midst of rewriting my Github Pages with React which I previously created using raw HTML & CSS only, I encountered a problem where I want to implement Google Font — Source Sans Pro in my application.

After some delving using Google and StackOverflow, I found some of the answers are either complicated or out-of-date. Thus, this article will show you how to configure and use Google Font with just two lines of code.

Step-by-Step Guide

1. Select Google Font — Source Sans Pro. Refer to the screenshot below.

Google Font — Source Sans Pro

2. Copy the @import font URL statement into one of the imported CSS files within the React Application.

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap');

If you’re creating your React application using create-react-app , you can paste the above statement into the index.css file.