Using Custom Fonts in React

Fonts play a role in capturing the attention of users and creating memorable experiences. While standard web fonts like Arial and Times New Roman work in a simple app, they may not always align with the unique branding or design requirements. This is where custom fonts can be a useful feature.

Going beyond the standard font library and adding a distinctive typography can personalize a web site/application. In this blog post, we will explore the process of integrating custom fonts into a React application, and walk through the necessary steps, from importing font files and defining CSS rules to applying the custom font to specific elements or components within your React components.

To use custom fonts in React, you can follow these steps:

Step 1: Import the Font File

First, make sure you have the font file (usually in the format of .TTF or .OTF, but any font type should work) that you want to use. It is also helpful to store the font file in your project’s asset folder. If there is not an asset folder in the project then you can create one inside the src directory. A good location might look like “src/assets/fonts”.

Step 2: Define a CSS File for the Font

Create a CSS file in your project, such as “src/assets/css/fonts.css”, to define the font-face rules for your custom font.

Open the CSS file and add the following code:

@font-face {
   font-family: 'CustomFont';
     src: url('../fonts/CustomFont.ttf') format('truetype');
     /* Add additional font formats if necessary */
}

In this example, the font file “CustomFont.ttf” is a placeholder for the custom font and is located in the “../fonts” directory relative to the CSS file. Adjust the path accordingly based on your project structure.

It’s important to note the format requirement. You can find more information about the accepted formats here.

Step 3: Import the CSS File

Next, if you would like to style the fonts within the React components then import the CSS file in React where you want to use the custom font. You can do this by adding the import statement at the top of your component file:

import React from 'react';
import './assets/css/fonts.css'; // Path to your CSS file

function MyComponent() {
 // Component code
}

Step 4: Apply the Custom Font

Now, you can apply the custom font to the desired elements within your component. Use the “font-family” CSS property and set it to the name you defined in the font-face rule (“CustomFont” in our example).

import React from 'react';
import './assets/css/fonts.css'; // Path to your CSS file

function MyComponent() {
 return (
   <div style={{ fontFamily: 'CustomFont' }}>
     <h1>This text will use the custom font.</h1>
     <p>Some other text with the custom font.</p>
   </div>
 );
}

In this example, we apply the custom font to a <div> element and all its children. You can also apply it to specific elements or components by setting the “fontFamily” style property accordingly.

That’s it! With these steps, you can use custom fonts in your React app.

Remember to adjust the file paths and font names based on your project’s structure and the actual font file you are using.