DEV Community

loading...

How to add custom font file to your React App?

Yeow Zi Qin
Student & web developer who have fervent passion in exploring cool and amazing technologies.
・2 min read

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

npx create-react-app [app-name]
cd [app-name]
code .
Enter fullscreen mode Exit fullscreen mode

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.

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

See you in the next post.

Discussion (1)

Collapse
georgewl profile image
George WL • Edited

I think it would also have been useful for folks to also detail how to import webfonts too, as often they are a more effectient way to import