The use of custom fonts is often overlooked in web design. The right choices can be the difference in how people perceive your brand or service. This is why today, I’m going to show you how to use any font from Google's font library in your React.js projects!
Google Fonts
I’m sure Google needs no introduction. They’ve become a household name over the years and for good reason. In this React tutorial, we are going to take advantage of Google’s free font library to add new fonts to our React project.
Link: https://fonts.google.com/
Step 1: Choosing a Font
Choosing which font to use is a mission in itself. If you’re lucky, a talented designer has already done the legwork and picked the perfect font for your website layout. If you’re on your own, worry not! There are many free resources online that can help you pick something worthwhile.
Here are some examples to get you started:
Step 2: Download the Font
Once you’ve made your selection, return to Google Fonts and search for the font. When you click on the font family, it will take you to a page similar to the one above. Click the download family button as marked with the red arrow.
The fonts are downloaded in a zipped file, you will need to unzip them as shown above before we can use them in a project.
Step 3: Importing the Font
Importing the font is as easy as opening up your index.css file and using the code below!
Step 4: Using the Font
Now that the font is imported you can use it anywhere as you normally would by adding the attribute and value below to your CSS element.
Optional Step: Variable Weights
You might also want to have light, regular, and bold versions as well and you can declare this during your import as shown below!
Conclusion
Today I showed you how to:
- Find free fonts on Google
- Find font pairings on sites such as Fontpair.co
- Download the free font
- Import the fonts to your index.css file
- Use the font in your elements
- Set up different font-weights
I hope you learned something today, keep checking back for more useful articles like this one!
