How to import font in Zip format to your React project.

It’s funny how we can be ignorant of little things even after many years of experience in our respective fields. A few days ago, I was working on a project, and my PM sent me a font to be used for the project. The font was in a ZIP folder. I was dumbfounded and confused about how to make use of the font in my project, which was a ReactJS project. On a normal day, I would just head over to Google Fonts, find the font I want to use for my project, include the CDN, and boom. my font is good to go.

I didn't know what to do until I researched and added that to my knowledge. Now, I will be sharing the same knowledge with you on how to include a font from a ZIP folder into your CSS file.

These are the steps to follow:

1. Extract the Font Files from the ZIP: You’ll need to extract the ZIP file containing the fonts. The fonts are usually in .ttf, .otf, .woff, or .woff2 format in the folder.

2. Add the Font Folder to Your Project: Adding the font folder to React projects can be more confusing compared to ordinary HTML and CSS projects. After extracting the ZIP file, in your src folder, create a folder named assets, then within that folder, create another folder and name it fonts. With that, you should have src/assets/fonts. Then drag all the contents from the folder you extracted from the ZIP file and place them in the fonts folder you created.

3. Import the Fonts into Your CSS: To make use of your font, you need to import them into your CSS using the @font-face rule, which is simple. Copy the code below and include it at the top of your App.css file:

    @font-face {
      font-family: 'MyCustomFont';
      src: url('./assets/fonts/MyCustomFont-Regular.woff2') format('woff2'),/* if it's in .woff2 */
           url('./assets/fonts/MyCustomFont-Regular.woff') format('woff'),/* if it's in .woff */
           url('./assets/fonts/MyCustomFont-Regular.ttf') format('truetype');/* if it's in .ttf */
      font-weight: normal;
      font-style: normal;
    }
   
    body {
      font-family: 'MyCustomFont', sans-serif;
    }
    /* remember to replace "MyCustomFont" with the name of your font */
   

4. Ensure the Path URL Matches the Path You Used: In case you used a path that’s different from the one I used here, make sure to use the correct one when importing it into your CSS and replace MyCustomFont-Regular with the name of your font.

If you find this article insightful, kindly give a clap and follow for more.