How to set a Global Font Family in ReactJS ?

0 0 3 minutes read

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}> 
                Geeksforzambiatek 
            </h1> 
            <p>A Computer Science portal for zambiatek. 
                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:

How-To-Set-A-Global-Font-Family-In-React--Example-2

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}> 
                    Geeksforzambiatek 
                </h1> 
                <p style={styles.paragraph}> 
                    A Computer Science portal for zambiatek. 
                    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:

How-To-Set-A-Global-Font-Family-In-React

Set A Global Font Family In React Using Emotion

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!