We may need to add fonts to the React application when we are working with the React application. So today we will see what are the ways to add fonts in the React application.

Demo Application

Setup a React Application

To demonstrate, let’s setup a React application. Here, we’ll create an application using create-react-app. Run the following command to create a React app.

To apply the various font-family we create three different div with dummy text. Take a look at the code below.

Ways to add fonts to the React app

1. Add local fonts
2. Include fonts from a URL
3. Import fonts in CSS

1. Add local fonts

Download the fonts you require (Refer Google Fonts) and store them in the fonts folder under src directory.

• node_modules
• public
  • index.html
• src
  • fonts
    • OpenSans-Regular.ttf
  • App.js
  • index.css
  • index.js
• package-lock.json
• package.json
• README.md

In the index.css, declare the @font-face as follows:

2. Include fonts from a URL

We’ll learn how to include fonts via a URL rather than a local import in this second technique.

Add the following code to the index.html head section.

Now add the following CSS to set the Roboto font.

3. Import fonts in CSS

We can import fonts into CSS files instead of including them in index.html.

Output

You should be able to see the different fonts being applied for the three different classes.

I hope you find this article helpful.
Thank you for reading. Happy Coding..!! 🙂

Demo & Source Code