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.
// 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
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:
Approach 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.
// 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" />
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