Devship

Using Fonts in React

In this section, we'll explore how to incorporate custom fonts in your React application using Google Fonts, external font files, and npm packages.

Using Google Fonts

Add the Google Fonts link tags directly to your public/index.html file:

<!-- public/index.html -->
<head>
    <title>React App</title>
    <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=Arvo&display=swap" rel="stylesheet">
</head>

Method 2: Importing in CSS Files

Alternatively, you can import Google Fonts in your CSS files like src/index.css or src/App.css:

/* src/index.css or src/App.css */
@import url('https://fonts.googleapis.com/css2?family=Arvo&display=swap');

body {
  font-family: 'Arvo', serif;
}

Using External Font Files

To use custom font files, follow these steps:

  1. Download the Font Files

    Download the font files (e.g., .ttf or .woff) and place them in a directory within your project, such as src/assets/fonts.

  2. Import and Use the Font

    Define the font-face in your CSS file and use it:

    /* src/App.css */
@font-face {
    font-family: 'MyCustomFont';
    src: url('./assets/fonts/MyCustomFont.ttf') format('truetype');
}

body {
    font-family: 'MyCustomFont', sans-serif;
}

Using npm Packages for Fonts

Some popular fonts are available as npm packages. For example, you can use the typeface-roboto package:

  1. Install the Font Package

    npm install typeface-roboto

  2. Import the Font in Your Project

    Import the font in your main JavaScript file, such as src/index.js:

    // src/index.js
import 'typeface-roboto';

// Your other imports and React code...

  3. Use the Font in Your CSS

    /* src/App.css */
body {
    font-family: 'Roboto', sans-serif;
}
Info

Using npm packages for fonts can be convenient for managing dependencies and ensuring consistent font usage across your project.

Task

Task

Practice Adding Fonts to a React Project

Objective: Integrate Google Fonts, an external font file, and a font npm package into a React application.

  1. Add Google Font (Arvo) via Link Tag:

    • Add the following to public/index.html:
    <head>
    <title>React App</title>
    <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=Arvo&display=swap" rel="stylesheet">
</head>
    • Use the font in src/App.css:
    body {
    font-family: 'Arvo', serif;
}

  2. Add an External Font File:

    • Download a font file and place it in src/assets/fonts.

    • Define and use the font in src/App.css:

    @font-face {
    font-family: 'MyCustomFont';
    src: url('./assets/fonts/MyCustomFont.ttf') format('truetype');
}

body {
    font-family: 'MyCustomFont', sans-serif;
}

  3. Add a Font Using an npm Package:

    • Install typeface-roboto:
    npm install typeface-roboto
    • Import the font in src/index.js:
    import 'typeface-roboto';

// Your other imports and React code...
    • Use the font in src/App.css:
    body {
    font-family: 'Roboto', sans-serif;
}

This task will help you practice adding different types of fonts to a React application.