How to set a Global Font Family in ReactJS ?
Last Updated :
24 Apr, 2025
In React Setting a global font family means defining a specific font style to be used throughout a website or application, ensuring consistent typography across all elements and text content.
When setting a global font family, developers specify a single font that will be universally applied across all components in their React application. This not only ensures consistent visual appeal but also simplifies the design process by eliminating the need to individually style fonts for each component.
Prerequisites:
These are the approaches to set Global Font Family in React JS
Steps to Create the React Application
Step 1: Create a react application by using this command
npx create-react-app font-family-app
Step 2: After creating your project folder, i.e. font-family-app, use the following command to navigate to it
cd font-family-app
Project Structure
Approach 1: Using Google Fonts CDN
In this appraoch, we are integrating external fonts from Google Fonts CDN into the HTML file of a project. By adding a link in the <head> section of the HTML file (like this: https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap), developers can make the specified font globally accessible. This saves time during development and allows for a wide selection of fonts from Google's extensive library to be used across the React app.
- Open the public/index.html file in your React project.
- In the <head> section of the HTML file, add a link to the Google Fonts CDN with the desired font family.
public/index.html
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@700&display=swap" rel="stylesheet" />
Example: In this above public/index.html, we're linking to the "Roboto" font family using the Google Fonts CDN. Different weights, including bold (700), are available. To enhance the user experience, we utilize the display=swap attribute. This ensures that while the Google Font is loading, the text will be displayed with the default font.
JavaScript
// Filename - App.js file
import React from 'react';
// Css file
import './App.css'
const App = () => {
return (
// Content to check whether font family
// are applied or not
<div style={styles.container}>
<h1 style={styles.heading}>
Geeksforgeeks
</h1>
<p>A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science and
programming articles,
</p>
</div>
);
};
export default App;
const styles = {
container: {
textAlign: "center",
width: 400,
},
heading: {
color: "green",
}
};
/* Filename - App.css */
body {
font-family: 'Roboto Mono', monospace;
}
<!-- Filename - public/index.html -->
<!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" />
<link
href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@700&display=swap"
rel="stylesheet" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
Steps to run: To open the application, use the Terminal and enter the command listed below.
npm start
Output:
Setting Global Font Family In React Example 1Approach 2: Using Emotion Library
Emotion, the CSS-in-JS library for React, offers a seamless way to define and implement global styles. By leveraging Emotion's Global and css functions within a custom component, we can efficiently set a universal font family for our React application.
Step to Install the emotion Library:
npm i @emotion/react @emotion/styled
Open the public/index.html file in your React project.In the <head> section of the HTML file, add a link to the Google Fonts CDN with the desired font family.
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">
Example: In this example, the React application sets global styles using Emotion CSS-in-JS. It styles the body, defining fonts, colors, and background, ensuring consistent styling for the entire app.
JavaScript
// Filename - App.js
import React from 'react';
import { Global, css } from '@emotion/react';
const styles = {
container: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
height: '100vh',
backgroundColor: '#f0f0f0',
},
heading: {
fontSize: '2rem',
fontWeight: 'bold',
color: '#333',
marginBottom: '20px',
},
paragraph: {
fontSize: '1rem',
color: '#555',
maxWidth: '400px',
textAlign: 'center',
},
};
const GlobalStyles = () => (
<Global
styles={css`
/* Apply global styles */
body {
margin: 0;
padding: 0;
background-color: #ffffff;
font-family: 'Noto Sans', sans-serif;
color: #333;
}
`}
/>
);
function App() {
return (
<div className="App">
<GlobalStyles />
<div style={styles.container}>
<h1 style={styles.heading}>
Geeksforgeeks
</h1>
<p style={styles.paragraph}>
A Computer Science portal for geeks.
It contains well-written,
well-thought, and well-explained
computer science and programming
articles.
</p>
</div>
</div>
);
}
export default App;
<!-- Filename - public/index.html -->
<!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" />
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap"
rel="stylesheet">
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
Steps to run: To open the application, use the Terminal and enter the command listed below.
npm start
Output: This output will be visible on the http://localhost:3000/ on the browser
Set A Global Font Family In React Using Emotion
Similar Reads
How to manage global state in a React application?
Global state refers to data that is accessible across multiple components in a React application. Unlike the local state, which is confined to a single component, the global state can be accessed and modified from anywhere in the component tree. In this article, we will explore the following approac
7 min read
How to Set Text Color in ReactJS ?
React provides you the ability to create interactive and dynamic useÂr interfaces. Within these interfaces, the choice of text color holds significant importance as it enhanceÂs the visual appeal and engageÂment for users. A foundational aspect of styling revolveÂs around modifying text color. In t
3 min read
How to add Analog Clock in ReactJS ?
In this article, we are going to learn how we can add Analog Clock in ReactJs. React is a free and open-source front-end JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. Approach to create Analog Cl
2 min read
How to Use Google Fonts in React?
Adding the Google fonts in React app enhances the typography. It provides a wide range of font styles that are easy to integrate and use in the react components. Google Fonts is a widely used popular library of open-source web fonts that provides a vast collection of typefaces to enhance the visual
5 min read
How to add styles to autocomplete in ReactJS ?
Autocomplete functionality in web applications is common for predictive user input. This article focuses on enhancing the visual appearance of ReactJS autocomplete components using Material-UI's package, offering customization options for seamless integration with the overall application design. Pre
3 min read
How to get an Element by ID in ReactJS ?
ReactJS, a popular JavaScript library for user interfaces, empowers developers with tools, such as the ref system, to manipulate the DOM by accessing elements using their unique IDs. This article explores the process of obtaining elements by ID in ReactJS for effective component interaction and mani
4 min read
How To Change The Favicon In React JS?
A favicon is a small icon that appears in the browser tab next to the page title. Changing the favicon in a React JS project can help improve the branding of your web application by displaying a custom icon that represents your business or website. In this article, we will explore the following two
4 min read
How to Use and Style React Components in Gatsby?
Gatsby is a popular static site generator that leverages React for building user interfaces. React components play a crucial role in Gatsby, allowing developers to create reusable UI elements and manage the state effectively. This article explores how to use and style React Components in Gatsby. Ste
2 min read
How to Change the Font Family & Size of Text in CSS ?
In CSS, the font family and size of the text can be customized to enhance the visual appearance of the text within the application. We can use various inbuilt properties offered by CSS to change font family and size. Below are the approaches to change the font family and size of text in CSS: Table o
3 min read
How to create components in ReactJS ?
Components in React JS is are the core of building React applications. Components are the building blocks that contains UI elements and logic, making the development process easier and reusable. In this article we will see how we can create components in React JS. Table of Content React Functional C
3 min read