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.

Recent Posts

How to Add Active Class in Map Items in React Js

In this quick tutorial, we will show you how to quite easily add the active…

1 day ago

How to Create and Use Redux Store in React Js

In this tutorial, we will learn how to create a Redux Store in React application.…

4 days ago

How to Build Dynamic Load More Feature in React Js

This detailed guide will cover how to create the Load More button and display data…

1 week ago

How to Integrate Redux Persist to React Redux Store

In this tutorial, we will step by step learn how to configure redux persist in…

1 week ago

React Redux Save Data in Local Storage with Persist Tutorial

In this comprehensive tutorial, we will learn how to persist redux store's states in React…

2 weeks ago

React Js Tailwind CSS Add Light and Dark Mode Toggler Tutorial

In this guide, we are going to learn how to add dark mode and light…

2 weeks ago