How to Use Google Fonts with Tailwind CSS 4 (CDN Method)

Typography plays an important role in modern web design. Using the right font improves readability, branding, and overall user experience.

When working with Tailwind CSS, you can easily integrate Google Fonts and apply them using Tailwind utility classes.

In this tutorial, you will learn:

How to add Google Fonts
How to integrate them with Tailwind CSS 4 CDN
How to apply fonts using Tailwind utilities

We will use the Tailwind CSS browser CDN.

CDN used in this tutorial:

https://unpkg.com/@tailwindcss/browser@4

Step 1: Add Google Fonts to Your Project

First, visit Google Fonts.

Choose any font. For this tutorial we will use Poppins.

Copy the link tag provided by Google Fonts.

Example:

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">

Step 2: Add Tailwind CSS 4 CDN

Now include Tailwind CSS using the browser CDN.

<script src="https://unpkg.com/@tailwindcss/browser@4"></script>

Step 3: Configure Font in Tailwind (CDN Method)

Since we are using the browser CDN, we can configure Tailwind using a <style> block.

Example:

<style type="text/tailwindcss">
@theme {
  --font-poppins: "Poppins", sans-serif;
}
</style>

This creates a custom Tailwind font variable.

Step 4: Use the Font in Your HTML

Now you can apply the font using Tailwind classes.

Example:

<!DOCTYPE html>
<html>
<head>

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">

<script src="https://unpkg.com/@tailwindcss/browser@4"></script>

<style type="text/tailwindcss">
@theme {
  --font-poppins: "Poppins", sans-serif;
}
</style>

</head>

<body class="bg-gray-100 p-10">

<h1 class="text-4xl font-bold font-[var(--font-poppins)]">
Learning Tailwind CSS with Google Fonts
</h1>

<p class="mt-4 text-gray-600 font-[var(--font-poppins)]">
This text uses the Poppins font integrated with Tailwind CSS 4.
</p>

</body>
</html>

Output:

Heading uses Poppins
Paragraph uses Poppins
Tailwind handles layout and styling

Step 5: Apply Font Globally

Instead of adding the font class everywhere, you can apply it globally.

Example:

<body class="font-[var(--font-poppins)]">

Now all text in your website will use the Poppins font by default.

Example Layout Using Google Fonts + Tailwind

<div class="max-w-xl mx-auto bg-white p-6 rounded-xl shadow-lg font-[var(--font-poppins)]">

<h2 class="text-2xl font-semibold">
Tailwind Typography Example
</h2>

<p class="mt-3 text-gray-600">
Tailwind CSS allows developers to quickly build modern UI components while maintaining clean and readable code.
</p>

<button class="mt-4 bg-blue-600 text-white px-4 py-2 rounded-lg">
Read More
</button>

</div>

This creates a clean modern card UI with custom typography.

Why Use Google Fonts with Tailwind?

Benefits include:

1. Better Typography

Google Fonts provides hundreds of professional fonts.

2. Easy Integration

Using CDN makes it quick without installing packages.

3. Improved UI Design

Custom fonts improve branding and readability.

4. Fast Development

Tailwind utility classes make font styling simple.

Best Google Fonts for Tailwind Projects

Some popular fonts used in modern web apps:

Font	Best Use
Poppins	UI design & landing pages
Inter	SaaS dashboards
Roboto	Applications
Open Sans	Blogs
Montserrat	Headings

FAQs

1. Can I use multiple Google Fonts with Tailwind?

Yes. You can import multiple fonts from Google Fonts and define multiple variables inside the @theme block.

Example:

@theme {
  --font-poppins: "Poppins", sans-serif;
  --font-roboto: "Roboto", sans-serif;
}

2. Is CDN good for production Tailwind projects?

CDN is best for:

Learning
Prototyping
Small projects

For production applications, it is recommended to install Tailwind via npm.

3. How do I apply fonts only to headings?

Example:

<h1 class="font-[var(--font-poppins)] text-4xl font-bold">
Heading Text
</h1>

Body text can use a different font.

4. Does Google Fonts affect website performance?

Google Fonts are optimized and cached globally, but loading too many fonts can slow down your site. Use only the font weights you need.

5. Can I use Tailwind font utilities instead of variables?

Yes. In a full Tailwind setup you can configure fonts in tailwind.config.js. However, with the CDN method using CSS variables is easier.

0 likes

Your Feedback

Help us improve by sharing your thoughts

Previous: Tailwind CSS Text Transform Tutorial – Uppercase, Lowercase & Capitalize Guide

Next: Flexbox with Tailwind CSS 4 – Flex Container & Flex Items

Online Learner helps developers master programming, database concepts, interview preparation, and real-world implementation through structured learning paths.

How to Use Google Fonts with Tailwind CSS 4 (CDN Method)

Step 1: Add Google Fonts to Your Project

Step 2: Add Tailwind CSS 4 CDN

Step 3: Configure Font in Tailwind (CDN Method)

Step 4: Use the Font in Your HTML

Step 5: Apply Font Globally

Example Layout Using Google Fonts + Tailwind

Why Use Google Fonts with Tailwind?

1. Better Typography

2. Easy Integration

3. Improved UI Design

4. Fast Development

Best Google Fonts for Tailwind Projects

FAQs

1. Can I use multiple Google Fonts with Tailwind?

2. Is CDN good for production Tailwind projects?

3. How do I apply fonts only to headings?

4. Does Google Fonts affect website performance?

5. Can I use Tailwind font utilities instead of variables?

Your Feedback

Quick Links

Company