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 (https://fonts.google.com/specimen/Fira+Sans), 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.

.src/fonts

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
  ...
}