Manually add Google fonts
Manually add Google Fonts in React by including the link tag with the Google Fonts URL in the public/index.html file’s <head> section, then apply the font using CSS in React components.
Steps to Manually use Google Fonts in React:
Step 1: Select a Google Font from their website.
Visit the link- Browse Fonts - Google Fonts and select the font you want to add. Here we are using the Monsterrat Font for instance.
Step 2: Integrating the font into React
Copy the <link> tag of the font into the public/index.html file of your React app to use in our project:
<link rel=”preconnect” href=”https://fonts.googleapis.com”>
<link rel=”preconnect” href=”https://fonts.gstatic.com” crossorigin>
<link href=”https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap” rel=”stylesheet”>
Step 3: Use the Imported Fonts
body {
font-family: 'Montserrat', sans-serif;
}
Example 1: The below example demonstrates the use of Google fonts in specific react elements.
<!-- Filename - public/inedx.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1" />
<link rel="preconnect"
href="https://fonts.googleapis.com">
<link rel="preconnect"
href="https://fonts.gstatic.com" crossorigin>
<link href=
"https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap"
rel="stylesheet">
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
/* Filename: styles.css */
.App {
text-align: center;
}
.gfg {
color: green;
}
.font-container {
font-family: "Montserrat", sans-serif;
}
.text {
font-size: 30px;
}
// Filename - App.js
import "./styles.css";
export default function App() {
return (
<div className="App">
<h1 className="gfg">w3wiki</h1>
<h2>How to use Google fonts in React JS</h2>
<div className="font-container">
<p className="text">
This text is written in Monsterrat Font
from Google Fonts{" "}
</p>
</div>
</div>
);
}
Step to run the application: Open the terminal and type the following command.
npm start
Output:
How to use Google Fonts in React?
Google Fonts is a widely used popular library of open-source web fonts that provides a vast collection of typefaces to enhance the visual appeal of web applications. Google Fonts provides a vast collection of free and high-quality fonts that can easily be integrated into your React applications.
In this React Google Fonts article, we will cover different methods to add custom fonts (Google font) to your React application. Before adding custom fonts to your project, you should be familiar with the concepts below.