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.

create a folder named '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.

paste the .ttf file to your fonts folder

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");
}

@font-face in css

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.

Import to App.js

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.

See you in the next post.

15