How to add fonts to React app

In my previous article, I explained how to include images in a react app. In this article, we will see how to add fonts to a react application.

Project setup

Create a react application by running the following command:

1npx create-react-app react-add-fonts

Including local fonts

Download the fonts you need (say from Google Fonts) and place it inside fonts directory in src folder

Now add a @font-face declaration in index.css:

index.css

1@font-face {
2  font-family: "OpenSans";
3  src: local("OpenSans"), url("./fonts/OpenSans-Regular.ttf") format("truetype");
4}
5.local {
6  font-family: "OpenSans", sans-serif;
7}

In the above code, we have declared the font OpenSans and created a class name local, which uses the declared font.

Now use it in the App.js file:

App.js

1import "./App.css"
2
3function App() {
4  return (
5    <div className="App">
6      <p className="local">
7        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem commodi
8        ipsa ratione, neque quisquam pariatur illo dolorum culpa a distinctio
9        laudantium velit explicabo mollitia ad sunt quaerat ea tempore nostrum!
10      </p>
11    </div>
12  )
13}
14
15export default App

Now you should be able to see the font being applied.

Using fonts from a URL (remote fonts)

Instead of storing fonts locally, you can directly refer to an external font.

Including fonts in index.html

You can include fonts in index.html as shown below:

index.html

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="utf-8" />
5    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6    <meta name="viewport" content="width=device-width, initial-scale=1" />
7    <meta name="theme-color" content="#000000" />
8    <meta
9      name="description"
10      content="Web site created using create-react-app"
11    />
12
13    <link rel="preconnect" href="https://fonts.googleapis.com" />
14    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
15    <link
16      href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
17      rel="stylesheet"
18    />
19    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
20    <!--
21      manifest.json provides metadata used when your web app is installed on a
22      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
23    -->
24    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
25    <!--
26      Notice the use of %PUBLIC_URL% in the tags above.
27      It will be replaced with the URL of the `public` folder during the build.
28      Only files inside the `public` folder can be referenced from the HTML.
29
30      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
31      work correctly both with client-side routing and a non-root public URL.
32      Learn how to configure a non-root public URL by running `npm run build`.
33    -->
34    <title>React App</title>
35  </head>
36  <body>
37    <noscript>You need to enable JavaScript to run this app.</noscript>
38    <div id="root"></div>
39    <!--
40      This HTML file is a template.
41      If you open it directly in the browser, you will see an empty page.
42
43      You can add webfonts, meta tags, or analytics to this file.
44      The build step will place the bundled scripts into the <body> tag.
45
46      To begin the development, run `npm start` or `yarn start`.
47      To create a production bundle, use `npm run build` or `yarn build`.
48    -->
49  </body>
50</html>

Here we are including the css files, which in turn will load the css files.
preconnect is used to tell the browser that these URLs will be loaded later and be ready. This helps in reducing the loading time.

Now update the css file to include the font family:

index.css

1@font-face {
2  font-family: "OpenSans";
3  src: local("OpenSans"), url("./fonts/OpenSans-Regular.ttf") format("truetype");
4}
5.local {
6  font-family: "OpenSans", sans-serif;
7}
8
9body {
10  font-family: "Roboto", sans-serif;
11}

The above style will apply to all the elements in the body, which do not have a specific font family mentioned.

Now add a heading in App.js:

App.js

1import "./App.css"
2
3function App() {
4  return (
5    <div className="App">
6      <h1>Welcome to CodingDeft</h1>
7      <p className="local">
8        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sunt harum
9        totam vero eveniet, quis explicabo recusandae. Labore, aliquam? Quis
10        tempora quasi earum obcaecati rerum explicabo nemo velit magnam cumque.
11        Ratione.
12      </p>
13    </div>
14  )
15}
16
17export default App

Importing remote css in index.css

Instead of including css files in index.html, we can import them in css files as well:

index.css

1@import url("https://fonts.googleapis.com/css2?family=Updock&display=swap");
2
3@font-face {
4  font-family: "OpenSans";
5  src: local("OpenSans"), url("./fonts/OpenSans-Regular.ttf") format("truetype");
6}
7.local {
8  font-family: "OpenSans", sans-serif;
9}
10
11body {
12  font-family: "Roboto", sans-serif;
13}
14
15.text {
16  font-family: "Updock", cursive;
17  font-size: 24px;
18}

Now you can use the class name .text in App.js

App.js

1import "./App.css"
2
3function App() {
4  return (
5    <div className="App">
6      <h1>Welcome to CodingDeft</h1>
7      <p className="text">
8        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem commodi
9        ipsa ratione, neque quisquam pariatur illo dolorum culpa a distinctio
10        laudantium velit explicabo mollitia ad sunt quaerat ea tempore nostrum!
11      </p>
12      <p className="local">
13        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sunt harum
14        totam vero eveniet, quis explicabo recusandae. Labore, aliquam? Quis
15        tempora quasi earum obcaecati rerum explicabo nemo velit magnam cumque.
16        Ratione.
17      </p>
18    </div>
19  )
20}
21
22export default App

Source code and Demo

You can view the complete source code here and a demo here.

Do follow me on twitter where I post developer insights more often!

How to add fonts to React app

Table of Contents

Project setup

Including local fonts

Using fonts from a URL (remote fonts)

Including fonts in index.html

Importing remote css in index.css

Source code and Demo

Related Articles

Leave a Comment

Tools