How do I import external fonts into React?

To import external fonts into your React application, you'll typically follow these steps:

1. Prepare Your Font Files

Ensure you have the font files you want to use (e.g., .woff, .woff2, .ttf, .otf). .woff2 is generally preferred for web use due to its superior compression.
Store the font files in a dedicated folder within your src directory (e.g., src/fonts). Creating a fonts directory keeps your project organized.

2. Define the Font Face in CSS

Create or modify your CSS file (e.g., src/index.css or a component-specific CSS file).
Use the @font-face rule to define the font family and specify the location of your font files.

/* src/index.css */

@font-face {
  font-family: 'YourCustomFont'; /* Choose a name for your font */
  src: url('./fonts/YourCustomFont-Regular.woff2') format('woff2'),
       url('./fonts/YourCustomFont-Regular.woff') format('woff'); /* Provide multiple formats for browser compatibility */
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'YourCustomFont'; /* Use the same name for different weights/styles */
  src: url('./fonts/YourCustomFont-Bold.woff2') format('woff2'),
       url('./fonts/YourCustomFont-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

/* You can add more @font-face rules for different weights (e.g., 300, 500, 700) and styles (italic). */

body {
  font-family: 'YourCustomFont', sans-serif; /* Apply the font to your desired elements */
}

Explanation:

font-family: This is the name you'll use in your CSS to refer to the font. Choose a descriptive name.
src: Specifies the path to your font files. Use relative paths that are relative to the CSS file. The format() property tells the browser the font format of the specified file. Providing different font formats enhances browser compatibility. woff2 and woff are commonly used.
font-weight: Specifies the weight of the font (e.g., normal, bold, 100, 400, 700).
font-style: Specifies the style of the font (e.g., normal, italic).

3. Import the CSS File

If you're using index.css, this step may already be done. If not, import the CSS file where you need to use the font (usually in src/index.js or a component's JavaScript file):

// src/index.js
import './index.css';
// ... your React app code

Note: If you're using CSS modules, you'll import the CSS file differently and apply the font family to the appropriate class names.

4. Using the Font in Your Components

Now you can use the font family in your React components' CSS:

// Example in a component's JSX

function MyComponent() {
  return (
    <div style={{ fontFamily: 'YourCustomFont' }}>
      This text uses the custom font.
    </div>
  );
}

export default MyComponent;

or more ideally, via your CSS class:

/* MyComponent.module.css */
.customFont {
    font-family: 'YourCustomFont';
}

import styles from './MyComponent.module.css';

function MyComponent() {
    return (
        <div className={styles.customFont}>
            This text uses the custom font.
        </div>
    );
}

export default MyComponent;

Alternative approach: Using a CSS Preprocessor (Sass, Less, etc.)

If you're using a CSS preprocessor, you can organize your font declarations into variables or mixins for better maintainability.

Alternative approach: Using a Library (e.g., Google Fonts)

While the original question specifically asks about external fonts, it is worth mentioning popular font libraries like Google Fonts. To use Google Fonts:

Go to the Google Fonts website.
Select the font(s) you want to use.
Copy the provided <link> tag and paste it into the <head> of your public/index.html file.
Use the font family name in your CSS.

<!-- public/index.html -->
<head>
  <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=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head>

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