Adding Google Fonts and Font-Family in React Js

Posted by

Alfalfa

–

August 2, 2024

In this tutorial, we will learn how to add Google Fonts in React Js and how to define their font-family in your application.

Step 1: Find and Select Google Fonts

The first step is to find the Google Fonts that you want to use in your React Js application. You can visit the Google Fonts website (https://fonts.google.com/) and browse through the vast collection of fonts available.

Once you have selected the fonts you want to use, click on the "+" icon next to the font name. This will open a tab at the bottom of the screen that shows the selected fonts. Click on the tab to see the code required to add these fonts to your website.

Step 2: Install Google Fonts Package

In React Js, you can easily add Google Fonts using the google-font-loader package. To install this package, open your terminal and run the following command:

npm install google-font-loader --save

Step 3: Add Google Fonts CSS Link

Next, you need to add the Google Fonts CSS link to your index.html file. Open the file located in the public folder of your React Js project and add the following code inside the <head> tag:

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

Replace the family parameter with the font you want to use and the wght parameter with the desired font-weight (e.g., {font_name}:wght@{font_weight}).

Step 4: Configure Google Fonts in React Js

Now that you have installed the google-font-loader package and added the CSS link to your index.html file, you can configure the fonts in your React Js application. Open your App.js file or any other component file where you want to use the Google Fonts and import the google-font-loader package:

import GoogleFontLoader from 'react-google-font-loader';

Next, add the following code inside the component where you want to use the Google Fonts:

<GoogleFontLoader fonts={[{ font: 'Roboto', weights: [400, 700] }]} />

Replace the font name with the name of the font you want to use and the weights array with the desired font weights.

Step 5: Define Font-Family in React Js

Once you have added the Google Fonts to your React Js application, you can define the font-family in your CSS files. For example, to set the font-family for a specific element, you can add the following code to your CSS file:

.my-text {
  font-family: 'Roboto', sans-serif;
}

This code will set the font-family for elements with the class my-text to the Google Font ‘Roboto’, with a fallback font of sans-serif.

And that’s it! You have successfully added Google Fonts to your React Js application and defined their font-family. Now you can style your application with beautiful typography using the vast collection of fonts available on Google Fonts.