How to add Custom Fonts in Your React.js Application

Photo by Luca Bravo on Unsplash

Custom fonts can make your React.js application stand out. Whether you’re trying to match your brand identity or just want a unique design, adding custom fonts is a great way to achieve this. In this blog post, we’ll go through the steps to add custom fonts to your React.js application.

Step 1: Download the Font Files
First, make sure your font files are ready. These can be .ttf, .otf, .woff, or .woff2 formats. If you don’t already have the files, you can download them from font stores like Google Fonts, Adobe Fonts, or other online sources.

Step 2: Place Font Files in Your Project

Create a directory within your src folder to store your font files. For instance, you can name the folder fonts:

src/
└── fonts/
    ├── custom-font.woff
    ├── custom-font.woff2
    └── custom-font.ttf

This organization keeps your project tidy and your fonts easily accessible.

Step 3: Define the Font in CSS

Next, you’ll need to define your custom font in a CSS file. You can create a new CSS file, such as fonts.css, or add the font definition to your existing CSS file.

Here’s how you can define your custom font in fonts.css:

@font-face {
    font-family: 'CustomFont';
    src: url('./fonts/custom-font.woff2') format('woff2'),
         url('./fonts/custom-font.woff') format('woff'),
         url('./fonts/custom-font.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

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

This CSS code snippet tells the browser to use the specified font files for the CustomFont family.

Step 4: Import the CSS File in Your Application

To apply the custom font throughout your application, import the fonts.css file in your main CSS file or directly in your App.js or index.js file.

In index.js, import the fonts.css file:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import './fonts.css'; // Import the fonts.css file
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

This ensures that the custom font is available globally in your application.

Step 5: Use the Custom Font

Now that the custom font is defined and imported, you can use it in your React components. For example, you can apply the font to specific elements using inline styles or class names:

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <p style={{ fontFamily: 'CustomFont' }}>
          This is a custom font!
        </p>
      </header>
    </div>
  );
}

export default App;

By following these steps, you can easily add and use custom fonts in your React.js application, giving it a unique and professional appearance.

Conclusion

Adding custom fonts to your React.js application enhances its visual appeal and helps in creating a distinct brand identity. With just a few steps involving CSS and React, you can seamlessly integrate custom fonts and elevate your web application’s design. Happy coding!