In this article, we will learn how to use Google fonts in ReactJS. Google Fonts is a widely popular library of open-source web fonts that provides a vast collection of typefaces to enhance the visual appeal of web applications. Integrating Google Fonts into ReactJS projects can be done using various approaches.
Here are some common approaches to adding Google fonts in React.js.
- Manually add Google fonts.
- Using styled-components library
Adding the Google fonts in the react js application is very easy and we will see the complete steps to use them in detail.
Step for Creating React Application and Installing Module
Step 1: Create a React application using the following command:
npm create-react-app appname
Step 2: After creating your project folder i.e. folder name, move to it using the following command:
cd foldername
Project Structure
Approach 1: Manually add Google fonts
Manually add Google Fonts in ReactJS 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.
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: Below example demonstrates the use of Google fonts in specific react elements.
App.js
Javascript
import "./styles.css"; export default function App() { return ( <div className="App"> <h1 className="gfg">neveropen</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> ); }; |
index.css
CSS
.App { text-align: center; } .gfg { color: green; } .font-container { font-family: "Montserrat", sans-serif; } .text { font-size: 30px; }; |
index.html
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="preconnect" <link rel="preconnect" <link href= rel="stylesheet"> <title>React App</title> </head> <body> <div id="root"></div> </body> </html> |
Step to run:
npm start
Output:
Approach 2: Using styled-components Library
Utilize the styled-components library in ReactJS to apply Google Fonts by defining component styles and specifying the desired font-family property using the font import syntax.
Step 1: Install the library
npm install styled-components
Step 2: Use the Google Fonts
import styled from 'styled-components';
const StyledText = styled.p`
font-family: 'FontStyle', sans-serif;
`;
function App() {
return (
<div>
<StyledText>
This text uses Google Fonts.
</StyledText>
</div>
);
};
Example 2: Below example demonstrates the usage of the styled-components library in the react app.
App.js
Javascript
import "./styles.css"; import React from 'react'; import styled from 'styled-components'; const StyledText = styled.h1` font-family: 'Monsterrat', sans-serif; font-size: 30px; `; export default function App() { return ( <div className="App"> <h1 className="gfg"> neveropen </h1> <h2> How to use Google fonts in React JS </h2> <div> <StyledText > Welcome to neveropen! </StyledText> </div> </div> ); }; |
index.css
CSS
.App { text-align: center; } .gfg { color: green; } .text { font-size: 30px; } |
Step to run:
npm start
Output:
