React

How to Add and Use Google and Custom Fonts in React App

Google Fonts is a popular font embedding library. It provides a solution to integrate fonts in all types of web applications, no matter what technology you are using to develop your application.

This free library comes will surely help you and comes in handy for all sorts of application development.

It offers many fonts, like Open Sans, Roboto, Lato, Oswald, Montserrat, Source Sans Pro, and Raleway. These aesthetically efficient fonts give the utmost profoundness to your users.

This React Google Fonts tutorial will teach you how to add google fonts in the react app, especially when using the create-react-app tool for react development.

React Js Implement Google and Custom Fonts Example

Step 1: Install React Project
Step 2: Custom Fonts
Step 3: Google Fonts in React
Step 4: Start React App

Install React Project

If you haven’t created the react app yet than use the following command to install the new app.

npx create-react-app react-xost

Once the app is installed, move toward the app’s root.

cd react-xost

Custom Fonts

Now, we will show you how to add custom fonts in React.

First, you have to download the custom font, you may download any font you want but make sure to use font face generator for making the web fonts.

Next, get into the src/ directory, there you have to create the fonts/ folder.

Now you have to keep the custom fonts in the src/fonts folder.

After that, you need to add the font face in the App.css file.

@font-face {
  font-family: "Open Sans";
  src: url("./fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
    url("./fonts/OpenSans-Regular-webfont.woff") format("woff");
  font-weight: bold;
  font-display: swap;
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: "Open Sans";
  font-weight: 400;
}

Google Fonts in React

Adding Google fonts can be done in many ways in react, we will start with the simple method.

Here is the first approach, Within your app’s public folder, look for the index.html file. Inside the head tag, you have to add the google fonts link.

Google offers plenty of free fonts and you can get the Google fonts from here.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="Web site created using create-react-app"/>
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <!-- Google Font -->
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;400&display=swap" rel="stylesheet">
    <title>React Xost</title>
  </head>

Here is another approach that you can take to add the google font in react app.

Go to App.css or the primary CSS file that renders the styling of your react app. After that, use @import to define the font in react.

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;400&display=swap');


body, html {
    font-family: 'Roboto', sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

Start React App

You may start the react app and check the fonts that you have added on your react app.

npm start

Conclusion

A font is a graphical representation of text that comprises a different typeface, point size, weight, colour, or design. In this tutorial, we discussed how to implement custom fonts in React and integrate Google fonts in React app.

We have seen various methods, which will help you embed fonts in React app.

Digamber

I am Digamber, a full-stack developer and fitness aficionado. I created this site to bestow my coding experience with newbie programmers. I love to write on JavaScript, ECMAScript, React, Angular, Vue, Laravel.