How to Add Google Fonts to Your React Project (Or any other Project)

Introduction:

Typography plays a crucial role in web design, influencing readability and aesthetics. Google Fonts offers a wide selection of free, high-quality fonts that can enhance your React application’s visual appeal. In this guide, I’ll walk you through the process of integrating Google Fonts into your React project using Vite.

Step 1: Choose and Download a Google Font:

• Visit Google Fonts: Go to Google Fonts and browse through the collection.
• Select Your Font: For this example, let’s choose “Saira Condensed”. Click on the font to open the font family page.
• Customize Your Selection: Choose your preferred styles and weights (e.g., regular, bold).
• Download the Font: Click the “Download” icon in the top-right corner. This downloads a zip file containing the font files.

Step 2: Convert Font Files to WOFF and WOFF2 Formats:

Extract the Downloaded Zip:

Extract the contents of the downloaded zip file to a convenient location on your computer.

Convert Font Files:

• You can use online tools like Font Squirrel’s Webfont Generator or Transfonter to convert the font files (usually TTF or OTF) to the WOFF and WOFF2 formats.
• Upload your font files and select WOFF and WOFF2 as the output formats.

Download Converted Files:
Once converted, download the WOFF and WOFF2 files to your computer.

Step 4: Add Font Files to Your Project

For this step I assume that you have already vite react setup correctly.

1. Create a Fonts Directory: Inside your React project directory (public folder), create a new directory named fonts.
2. Move Font Files: Move the downloaded WOFF and WOFF2 font files into the fonts directory.

Step 5: Import and Use the Font in Your React Application

Create a CSS File: In your src directory, create a CSS file (e.g., index.css) or use the existing CSS file (e.g., App.css).

Import Font in CSS: Use @font-face in your CSS file to import the font:

Apply Font to Your React Components: Use the imported font in your components by referencing the font-family defined in your CSS:

if you want to add more font weight below are some more examples of how to do it:

@font-face in index.css:

Link You Fonts in Your root HTML file (Index.html):

Now you can write any of the above weight in your react component :

Conclusion:

Now you’re ready to use the fontFamily anywhere in your project. Remember, the @font-face declaration must be included in your index.css (or any global CSS file) to make the font accessible throughout your application. In the example, we've included only font-weight: normal; (400); you can add more variations like font-weight: 500; to access all available font weights.

By following these steps, you can effectively integrate and utilize Google Fonts to enhance the typography and design of your React project. Customize as needed to achieve the desired look and feel across your application.