Hi there! I’m Maneshwar. Currently, I’m building a private AI code review tool that runs on your LLM key (OpenAI, Gemini, etc.) with flat, no-seat pricing — designed for small teams. Check it out, if that’s your kind of thing.
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.
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.
Source: DEV Community.
Leave a Reply