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.
Top comments (4)
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
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
use transfonter.org/
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