Customize Your React Project with Fonts
If you’ve ever built an application, you know that working with HTML and CSS can be quite daunting. No matter how great or flawless your code is, if it’s not visually appealing to your audience, they likely won’t remember your app. While there are plenty of resources out there to guide you through CSS styling, one of the easiest ways to customize your application is by using fonts.
Why Fonts?
There is science and art behind how fonts influence people.
You immediately think of Walt Disney. Its style is unmistakable and is a huge part of Disney’s brand. Companies meticulously decide the best match for their logos and brand styling. It’s so important that there’s even a book about it by Sarah Hyndman. In it, she discusses the psychological impacts and associations fonts can have.
Want to read this story later? Save it in Journal.
Implementing Fonts with Google Fonts
There are multiple ways you can include custom fonts in your React project. One of the most common ways is through Google Fonts. The documentation is available here.
Once you find a font you like, you simply include the link code that they provide to the <head> of your HTML and you’re ready to use the font as a style attribute to anywhere in your application.
The Link Code and Style Attributes to include in your app are highlighted in the red boxes.
Include the Link Code in the <head> of your HTML file.
To use the font, add the styling to the correct element in your CSS file.
While Google Fonts is very easy to use, the free options are limited and you may not always find the best match for your app. The work around to this is by downloading a font you find online and directly bundling the font in your application.
How to Bundle a Font in Your React Application
The first step to download a font to your computer. There are many reputable websites that offer thousands of free font styles. To name a few: Font Squirrel, Font Space, DaFont, FFonts, and 1001Fonts.
Once you download the font, unzip the file, and have a .ttf font file, create a fonts folder in the root or src directory.
Copy the font into that folder. In the example below we will be using the Pop Art font.
In your index.js file, import the font so that it can be used in every component.
In the projects index.css file you will need to add the font face. You can use the same syntax as below. The format is truetype because the font file is a truetype font (.ttf).
Now the font’s ready to be used anywhere in the app by addingfont-family: '<font name>' to the element’s CSS.
Styling
Once the fonts are available to be used in your application, remember to style them accordingly. Fonts have their own properties where you can change how they are displayed. Learn more about that here.
With some minor styling, this is how the fonts are displayed after starting up your server.
In Conclusion
Although they’re hidden in plain sight, fonts have the ability to trigger memories, associations, and multi-sensory experiences in your imagination. Therefore, it’s importantly to carefully consider the font used in your next React application. If you can find a great option from Google fonts, embedding it is a breeze. Otherwise if you want to include a more customized font, bundle it in directly. Either way, it makes your app feel more personalized and leaves a lasting impression on the user.
Always remember…
📝 Save this story in Journal.
