React Js Include Custom Fonts / Google Fonts Tutorial

In this quick guide, you will learn how to include google fonts and custom fonts in the react app, especially when using the create-react-app approach for react app development.

The font is not just a printable character or text; it is more than that; every font recites a diffrent story. Fonts are used to embed style in a web or mobile application; however, fonts are not limited to application development.

This tutorial will teach you how to integrate custom fonts and google fonts in React js application from scratch. There are various ways through which fonts can be added into React web or mobile app, but we will explain the simplest way to add fonts in React app.

How to Add Custom Fonts in React App (Create React App)

  • Step 1: Set New React App
  • Step 2: Add Google Fonts
  • Step 3: Add Font Face in React
  • Step 4: Run Application

Set New React App

Go to command prompt, type the suggested command on the console screen. After that hit enter, and allow the app installation process.

npx create-react-app react-demo

Once the app is ready, move into the project directory.

cd react-demo

Add Google Fonts

There are several ways by which you can embed Google fonts in a React app.

Some of them we are going to explain here.

Method 1: Go to your stylesheet, app.css, style.css, or whatever name you have defined.

In our case, we have to open the App.css file and import the Google font as shown below.

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


* {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;    
}

Method 2: You can straight away include the google fonts link in the public/index.html file.

<!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" />

    <!-- Font link -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap" rel="stylesheet">
    <title>React App</title>
  </head>

Add Font Face in React

In this step, we will teach how to include custom fonts in react create app.

We assume you have created the font face using the font face generator.

Create the fonts/ folder into the src directory, and keep the fonts into this folder.

React Js Include Custom Fonts / Google Fonts Tutorial

Open the App.css file, copy and paste the provided code into the file.

@font-face {
    font-family: 'Merriweather';
    src: url('./fonts/Merriweather-BoldItalic.woff') format('woff2'),
        url('./fonts/Merriweather-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}


* {
    font-family: 'Merriweather';
    font-weight: bold;
    font-style: italic;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;    
}

Run Application

Run the react development server to view the app on the browser.

npm start

Summary

There are numerous types of fonts available on the internet when it comes to reading or visualizing the information on the site. Fonts indeed enhance the reader’s user experience.

In this React google fonts tutorial, we shared how to implement fonts in react app for create-react-app; we hope this guide helped you.