How to Add Fonts to Create-react-app Based Projects?

How to Add Fonts to Create-React-App Based Projects?

If you are working on a Create-React-App based project and want to add custom fonts to enhance the typography of your application, you’ve come to the right place. In this blog post, we will explore two different methods to add fonts to your Create-React-App projects.

Method 1: Using Google Fonts

Google Fonts is a widely used and trusted resource for adding custom fonts to web projects. Here’s how you can use it with Create-React-App:

1. Head over to Google Fonts and browse through the vast collection of fonts available.
2. Select the font(s) you want to use by clicking on the “+” icon next to each font.
3. Once you have selected the desired fonts, click on the “Family Selected” bar at the bottom of the page.
4. In the pop-up window, you will find the necessary code snippets to add the fonts to your project. Copy the provided link tag and paste it inside the section of your index.html file in the public folder.
5. To apply the font to your components, you can use CSS styling. For example, if you want to apply the font to a specific class, you can add the following CSS code to your component’s CSS file:

.myCustomFont {
  font-family: 'Your Font Name', sans-serif;
}

Replace 'Your Font Name' with the actual font name you selected from Google Fonts.

Method 2: Using Local Fonts

If you have custom font files that you want to use in your Create-React-App project, you can follow these steps:

1. Create a new folder called fonts inside the src folder of your project. Place your font files (e.g., .ttf, .woff, or .woff2) inside this folder.
2. In your CSS file, you can use the @font-face rule to define the font and its source. Here’s an example:

@font-face {
  font-family: 'Your Font Name';
  src: url('../fonts/your-font-file.ttf') format('truetype');
}

Replace 'Your Font Name' with the desired name for your font, and '../fonts/your-font-file.ttf' with the correct path to your font file.

Once you have defined the @font-face rule, you can use the font in your components by applying the appropriate CSS styling, similar to Method 1.

That’s it! You have successfully added custom fonts to your Create-React-App based project. Whether you choose to use Google Fonts or local fonts, make sure to select fonts that align with your project’s design and branding.

Happy coding!