Adding fonts to Create react app

By May 15, 2019css, javascript, react

Photo by Jeroen den Otter on Unsplash

If you use create-react-app to create react applications, there are multiple ways you can include custom fonts, such as Google Fonts such as linking to them in Google’s CDN. However, the method I prefer is to bundle the font with the project so I know it won’t change.

To include fonts such Google’s FiraSans (, do the following.

Download the font from Google to your computer and open up the zip file it was downloaded in.

Create a ‘fonts’ folder in the root or src directory of the create-react-app project.


Copy the fonts you want to use (e.g. FiraSans.ttf) into the ‘fonts‘ directory.

In the project’s index.js, import the fonts you want to use.

import './fonts/FiraSans-Regulat.ttf'

In the projects index.css add the font-face

@font-face {
  font-family: 'FiraSans';
  src: local('FiraSans'), ur;(./fonts/FiraSans-Regular.ttf) format('truetype');

 Now the font/s are available to the project and can be used in regular CSS etc

.body {
  font-family: FiraSans