How to use Airbnb Cereal in a React app.[deprecated]

Recently, I was working on a website that needed somewhat of a 'cool' feel while still being able to deliver readability. The text font-family would definitely play a pivotal role in enabling the web app to feel like that and so I went on a quest to find the perfect typeface for the job.

My encounter with Airbnb Cereal:

I remember the first time I saw Airbnb Cereal (https://airbnb.design/cereal/), I was collaborating on the styled-components website and I saw it. I checked it out and honestly, it was love at first sight.

Airbnb Cereal is a geometric sans serif typeface designed with an overall roundness that feels friendly and approachable. This is all in line with Airbnb's efforts in designing for trust.

How to get started:

Step 1. Download Airbnb Cereal Font from https://www.cufonfonts.com/font/airbnb-cereal-app.

Step 2. In the src directory of your react app, create a folder called fonts.

Step 3. Inside fonts, paste all the AirbnbCereal ttf files.

Step 4. Go into the index.js file and import all the fonts.

Now you have successfully added AirbnbCereal as a custom font in your React app and you can now use it anywhere inside your app.

In your styles, under font-family, you can set the font family as Bold, Black, Book, ExtraBold, Light, Medium.

*Note that the values are not case sensitive.

Congratulations!! You have successfully added AirbnbCereal as a custom font to your React app.

*Note: AirbnbCereal is a licensed typeface and so legally, you are not allowed to use it in your applications.

Feel free to reach out if you're looking for a developer, have a question, or just want to connect. (kibuikacodes@gmail.com)

Cheers.