How to add fonts to the React application

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.

Checkout more articles on ReactJS

Demo Application

Output - How to add fonts to the React application - Clue Mediator

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.

npx create-react-app react-add-fonts

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

App.js

import React from 'react';

function App() {
  return (
    <div class="app">
      <h2>Add fonts to the React app - <a href="https://www.cluemediator.com" target="_blank" rel="noreferrer noopener">Clue Mediator</a></h2>

      <div class="local-font">
        <strong>Font Family: OpenSans</strong><br>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      </div>

      <div class="url-font">
        <strong>Font Family: Changa</strong><br>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      </div>

      <div class="css-font">
        <strong>Font Family: Updock</strong><br>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      </div>
    </div>
  );
}

export default App;

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:

index.css

@font-face {
  font-family: "OpenSans";
  src: local("OpenSans"), url("./fonts/OpenSans-Regular.ttf") format("truetype");
}

.local-font {
  font-family: "OpenSans";
}

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.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?display=swap&family=Changa:wght@300&display=swap" rel="stylesheet">

Now add the following CSS to set the `Roboto` font.

.url-font {
  font-family: "Changa";
  font-size: 20px;
}

3. Import fonts in CSS

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

@import url("https://fonts.googleapis.com/css2?display=swap&family=Updock&display=swap");

.css-font {
  font-family: "Updock";
  font-size: 30px;
}

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

GitHub Repository