Adding downloaded fonts in your React app

Hola amigos👋,

There exist fonts which can't be found on Google Fonts.
And now you're left with no other option but to download and import them in the code on your own.

Lucky You🍀 It's not that difficult to add downloaded fonts in the React App.

You just need to follow these 4 steps:

1. Create a fonts folder in the src folder of your React app.

2. Add the downloaded fonts in the fonts folder created.

The Folder Structure would look something like this:

3. In the index.css file, write the following lines of code:

/* In index.css */

@font-face {
  font-family: "GilroyRegular";
  src: local("GilroyRegular"),
    url("./fonts/Gilroy-Regular.otf") format("opentype");
  font-weight: normal;
}

/* Other font formats include:
'woff2', 'truetype, 'woff', 'embedded-opentype', and 'svg' */

4. Import the index.css file in the index.js file.

// In index.js

import "./index.css";

Now to use it, you just need to add the following css:

/* In any .css file */

.selector {
font-family: "GilroyRegular";
font-style: italic;
}

😃Whoa!
We have successfully integrated the downloaded font in our webapp🔥