How To Add And Use Google And Custom Fonts In A React App

Google Font is a very popular font embedding library. It offers to integrate fonts in different web applications. We can use these fonts in different apps made with different technologies.

This Google Font library is free of cost and quite handy for all types of application developments. It provides many fonts like Open Sans, Roboto, Lato, Oswald, Montserrat, Source Sans Pro, Raleway.

This guide React Google Fonts will make us learn how to add Google fonts in the React app.

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

Let’s learn in detail now:

Step 1- Install React Project

Below given is the command which we have to use for downloading the new React app:

npx create-react-app react-xost

Since we have already installed the new app, we will now move into the app’s root:

cd react-xost

Step 2- Custom Fonts

Let’s see now how to add custom fonts in React.

First of all, we will download the custom font. We can download any font but we should remember to use font-face generation for making the web fonts.

Further, we have to get into the src/ directory where we will create the fonts/ folder.

Then, we have to keep the custom fonts in the src/fonts folder.

Afterward, we 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;
}

Step 3- Google Fonts In React

There are many ways in which we can add Google Fonts in React. Here, we will just start with the simple method.

This is the first approach. Within our app’s public folder, we will look for the index.html file. Inside the head tag, we have to add the Google fonts link.

Google offers many free fonts and we 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>

This is another approach that we can use for adding the Google font in React app.

Then, we go to App.css or the primary CSS file that renders the styling of our React app. After that, we will 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;
}

Step 4- Start React App

So now, we have reached the end where we have to run the React app for adding the fonts in our React app:

npm start

Conclusion

Google Font is a graphical representation of text that comprises different typefaces, point sizes, weight, color, design. In this guide, we have discussed how to implement custom fonts in React and integrate Google Fonts in React app.

Thanks