DEV Community

Yeow Zi Qin
Yeow Zi Qin

Posted on

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 .
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.

Top comments (3)

Collapse
 
dplata profile image
silverboi

This is great! I added some fonts using sass and font face snippet looks like this:
@font-face
font-family: "rockwellregular"
src: local("SeravekRegular")
src: url("./fonts/SeravekRegular/SeravekBasic.ttf") format("truetype")

Thought it might help someone :D

Collapse
 
franklivania profile image
Chibuzo Franklin Odigbo

I tried, but I couldn't get it working in my React.js app. I am seriously lost at what to do,d and I cannot seem to get the CSS import link anywhere on the internet. It works well for normal HTML, CSS and JS apps though

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