15
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 .
In this case, I will download Airbnb Cereal App font from this website: Airbnb Cereal App Font.
Copy the .ttf file or .woff file from the folder and paste it to your fonts folder in the React project.
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"); }
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.
15