Athreya aka Maneshwar

Posted on Aug 21

How to Add Google Fonts in a React Project with Tailwind CSS

#webdev #programming #javascript #beginners

Hello, I'm Maneshwar. I’m building LiveReview, a private AI code review tool that runs on your LLM key (OpenAI, Gemini, etc.) with highly competitive pricing -- built for small teams. Do check it out and give it a try!

Typography plays a big role in how your app feels.

By default, Tailwind CSS ships with a set of system fonts, but most projects need something unique.

Luckily, it’s very easy to integrate Google Fonts with React and Tailwind CSS.

In this blog, we’ll walk through adding the EB Garamond font from Google Fonts into a React + Tailwind project.

Step 1: Pick a Google Font

Head over to Google Fonts and select your desired font.

For this tutorial, we’ll use EB Garamond.

When you click on the font, you’ll see an Embed code section that looks like this:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap" rel="stylesheet">

Step 2: Add the Font Link in React

In your React project, open the public/index.html file and paste the Google Fonts <link> inside the <head> tag.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>React App with Tailwind</title>

    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap" rel="stylesheet">
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Step 3: Extend Tailwind Config

Next, open your tailwind.config.js file and extend the font family with your new Google Font.

// tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        'eb-garamond': ['EB Garamond', 'serif'],
      },
    },
  },
  plugins: [],
}

This tells Tailwind that you now have a new font utility class font-eb-garamond.

Step 4: Use the Font in Components

Now you can use the font anywhere in your React components:

export default function App() {
  return (
    <div className="p-8">
      <h1 className="text-4xl font-eb-garamond font-bold">
        Welcome to My React + Tailwind Project
      </h1>
      <p className="mt-4 font-eb-garamond text-lg">
        This paragraph is styled with EB Garamond from Google Fonts.
      </p>
    </div>
  );
}

Step 5: Test It

Run your project with:

npm start

You should see your app using the EB Garamond font everywhere you applied font-eb-garamond.

Final Thoughts

That’s it! 🎉 You just integrated a Google Font into your React project using Tailwind CSS.

This method works with any font from Google Fonts — just update the <link> and fontFamily entry in tailwind.config.js.

LiveReview helps you get great feedback on your PR/MR in a few minutes.

Saves hours on every PR by giving fast, automated first-pass reviews. Helps both junior/senior engineers to go faster.

If you're tired of waiting for your peer to review your code or are not confident that they'll provide valid feedback, here's LiveReview for you.

DEV Community