In this article, we will learn about setting Global font family 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:
- Introduction to React
- NPM or NPX
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 Struture
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.
App.js file
Javascript
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}> Geeksforneveropen </h1> <p>A Computer Science portal for neveropen. 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", } }; |
CSS
/* App.css */ /* App.css */body { font-family: 'Roboto Mono', monospace; } |
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 1
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.
Install the emotion bibrary by using this command:
npm install @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.
App.js
Javascript
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}> Geeksforneveropen </h1> <p style={styles.paragraph}> A Computer Science portal for neveropen. It contains well-written, well-thought, and well-explained computer science and programming articles. </p> </div> </div> ); } export default App; |
Steps to run: To open the application, use the Terminal and enter the command listed below.
npm start
Output:
Set A Global Font Family In React Using Emotion
