How to add custom font file to your React App?

Before everything gets started, go ahead and run the following code in your terminal.

npx create-react-app [app-name]
cd [app-name]
code .

Step 1: Create a font folder in src

In this case, I will name it as fonts.

Step 2: Download a font family file from the Internet

In this case, I will download Airbnb Cereal App font from this website: Airbnb Cereal App Font.

Step 3: Extract the .zip folder

Copy the .ttf file or .woff file from the folder and paste it to your fonts folder in the React project.

Step 4: Create @font-face in your App.css/index.css

In this case, I will create @font-face in my App.css file. Open your App.css and write:

@font-face {
  font-family: "Light";   /*Can be any text*/
  src: local("AirbnbCerealLight"),
    url("./font/AirbnbCerealLight.ttf") format("truetype");
}

Continue to write for the other font files in the same format.

Notice that if your font file is .woff format, you should write the format if woff like this:

@font-face {
  font-family: "Medium";   /*Can be any text*/
  src: local("AirbnbCerealMedium"),
    url("./font/AirbnbCerealMedium.woff") format("woff");
}

Step 5: Import it into your project

In this case, I will import it to my App.js file, which can then access by all the components.

then you can use the font in your CSS code like this:

.css file

.container {
  font-family: "Light"; //"Medium"
}

styled-components

const Container = styled.div`
  font-family: "Light"; //"Medium"
`;

Thanks for reading; I hope you are getting excited and finding this helpful.

Further research:
CSS-Tricks-font-face
CSS-Tricks-best-font-loading-strategies

See you in the next post.