TJL #12: How to change font in React

Who knew that changing a font could be so tricky?

Hi friends,

Welcome back to Today Jan Learned (TJL) #12. In this newsletter I try to share something interesting every day so stay tuned for today’s lesson.

Today I’ll show you how to change the font in your React project. I’m learning React and just want to write down my findings so I can find them later again.

In a nutshell, to change your font you need to do three things:

• Download the font and put it somewhere where React can find it

• Add the font-family to your CSS

• Add styling to your CSS elements like headers, body, paragraphs etc.

Problem

You want to change fonts in your React project.

Solution

One solution is to supply the font with a Content Delivery Network (CDN). A great tutorial about this you can find here.

Another solution is to download the font and bundle it with our project. That’s what I’ll show you here.

Step 1. Setup

First create a new React app

npx create-react-app change-font

Go in the folder and run the project

cd change-font

npm start

This is what you should see.

Step 2. Download Font

Go to Fontshub.pro and download your font.

The great thing about Fontshub is that they bundle the fonts with a stylesheet.css which we are going to use later.

Step 3. Add some content

Add some content by changing your App.js to look like this.

Your app should now look something like this with content by no styling.

Step 4. Create a fonts folder and add the fonts

In your src folder create a new folder called fonts. Copy the font faces that you want to use, in my case MessinaSans-Regular. Make sure you copy over all the different extensions used by different browsers.

Step 5. Add font-face to index.css

Add this to your index.css, which you find in the stylesheet.css of the fonts that you downloaded mentioned earlier.

Step 7. Add styling in App.css

You have now downloaded the font, added it to the project, added the font face family to your css, all that is left to do is to apply the styling to some of the HTML elements.

Add this to your App.css,

Step 8. Done

That’s it! Now your project looks all buttery smooth. Look at that gorgeous font. Yeah baby.

Recap

Today’s lesson was on how to add a font to your React project. I admit this might be a bit boring but nonetheless, thank you for reading. If you would like to access the project code just shoot me a message.

Like this article? Follow @janmeppe on Twitter

Previous TJLs

• TJL #1: How to conduct a weekly review

• TJL #2: How to set up a StackNavigator in React-native

• TJL #3: Money is not wealth

• TJL #4: You get rich by owning things

• TJL #5: How to not be overwhelmed

• TJL #6: How to remember the difference between margin and padding

• TJL #7: According to Jeff Bezos there are two types of failure

• TJL #8: A stupid coding mistake

• TJL #9: Akrasia

• TJL #10: How to set goals like Google

• TJL #11: How to write great copy for your startup product

Resources

• https://reactgo.com/add-fonts-to-react-app/

• https://create-react-app.dev/docs/adding-images-fonts-and-files/

• https://scotch.io/@micwanyoike/how-to-add-fonts-to-a-react-project#toc-using-web-font-loader