React Tutorials

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 enthusiast. I crafted this site to bestow my coding experience and love to write on JavaScript, React, Angular, Vue, Laravel.

Recent Posts

React Display Validation Error Messages with Hook Form Tutorial

As a React developer, you must know how to implement validation in form, and a…

2 days ago

React Hook Form 7 Required Checkbox Validation Tutorial

Creating checkboxes in React is not so difficult, especially when you are using React Hook…

5 days ago

React Hook Form 7 Custom Radio Buttons Tutorial

Learning React is not complicated; instead, it's easy, but only when you have the right…

1 week ago

React Bootstrap Custom Dropdown List with Fetch API Tutorial

Dropdown is a valuable and prominent module, which is often used to select one option…

2 weeks ago

React Hook Form Reset / Clear Form Values and Errors Tutorial

React form reset tutorial; Forms are handy provides the best possible way to get information…

2 weeks ago

React Show Loading Spinner on Submit Click Tutorial

You click on the submit button, form is processed, but nothing is being shown to…

2 weeks ago