How to add custom fonts in React without Font CDN

3061



In this post, we will see how to add custom fonts to our react app.

Generally to add custom fonts we use CDN from an external source like Google Fonts etc. But the problem with them is they may increase the site startup time, as they download the fonts from the resource. Also if you're using the app in a low network area the font doesn't load sometimes. We will use the local font method in this post.

Adding the fonts to our local project

  1. First download the font you want to use
  2. Create a folder fonts in src folder
  3. Add the downloaded font to the fonts folder
  4. Open your index.css file and include the font by referencing the path.
@font-face {
  font-family: 'Gilroy';
  src: local('Gilroy'), url(./fonts/Gilroy.ttf) format('truetype');
}

Here for the post, I used Gilroy font you can use anything you want.