DEV Community

Charan Gutti
Charan Gutti

Posted on

Adding custom fonts in tailwind ( Simple guide )

#tailwindcss #css #explainlikeimfive #beginners

Fonts are one of the easiest ways to give your project a unique look. With Tailwind CSS, you can add custom fonts in just a few simple steps.

In this guide, we’ll use the Poppins font and go through three easy methods:

  1. Google Fonts Import
  2. Local Fonts with @font-face
  3. Variable Fonts (.ttf / .woff2)

At the end, we’ll also see a bonus modern method using @theme and CSS variables.

1. Using Google Fonts Import

The quickest method is to pull directly from Google Fonts.

Step 1: Import the font

Go to Google Fonts, choose Poppins, and copy the import link. Add it to globals.css (or your main stylesheet):

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;900&display=swap');
Enter fullscreen mode Exit fullscreen mode

Step 2: Update Tailwind config 

export default { theme: { extend: { fontFamily: { sans: ['Poppins', 'sans-serif'], }, }, }, };
Enter fullscreen mode Exit fullscreen mode

Step 3: Use it 

<h1 class="font-sans text-3xl font-bold">Hello with Poppins!</h1>
Enter fullscreen mode Exit fullscreen mode

✅ That’s it. Super quick.

2. Using Local Fonts with @font-face

If you want to host the fonts yourself (better control, offline, licensing reasons), use @font-face.

Step 1: Place font files

Download Poppins Regular and Bold, then place them inside:

/public/fonts/Poppins-Regular.woff2 /public/fonts/Poppins-Bold.woff2
Enter fullscreen mode Exit fullscreen mode

Step 2: Add @font-face

In globals.css:

@font-face { font-family: 'Poppins'; src: url('/fonts/Poppins-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; } @font-face { font-family: 'Poppins'; src: url('/fonts/Poppins-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; }
Enter fullscreen mode Exit fullscreen mode

Step 3: Update Tailwind config 

export default { theme: { extend: { fontFamily: { sans: ['Poppins', 'sans-serif'], }, }, }, };
Enter fullscreen mode Exit fullscreen mode

Step 4: Use it 

<p class="font-sans text-lg">Now running locally hosted Poppins!</p>
Enter fullscreen mode Exit fullscreen mode

3. Using Variable Fonts (.ttf / .woff2)

Variable fonts let you use one file for all weights instead of downloading multiple files.

Step 1: Place variable font

Example:

/public/fonts/Poppins-Variable.woff2
Enter fullscreen mode Exit fullscreen mode

Step 2: Add @font-face 

@font-face { font-family: 'PoppinsVariable'; src: url('/fonts/Poppins-Variable.woff2') format('woff2'); font-weight: 100 900; /* covers all weights */ font-style: normal; }
Enter fullscreen mode Exit fullscreen mode

Step 3: Update Tailwind config 

export default { theme: { extend: { fontFamily: { variable: ['PoppinsVariable', 'sans-serif'], }, }, }, };
Enter fullscreen mode Exit fullscreen mode

Step 4: Use it 

<h1 class="font-variable font-extralight text-2xl">Thin</h1> <h1 class="font-variable font-bold text-2xl">Bold</h1> <h1 class="font-variable font-black text-2xl">Black</h1>
Enter fullscreen mode Exit fullscreen mode

✔️ One file → all weights. Much cleaner.

4. Bonus: Using @theme and CSS Variables

With Tailwind’s new @theme, you can define font tokens as CSS variables.

Step 1: Define in CSS 

@theme { --font-poppins: "Poppins", "sans-serif"; }
Enter fullscreen mode Exit fullscreen mode

Step 2: Use in HTML 

<h1 class="font-[var(--font-poppins)] text-4xl font-bold"> Heading in Poppins </h1>
Enter fullscreen mode Exit fullscreen mode

👉 This is great for branding projects with multiple fonts, as you only need to update in one place. Highly recommended to use this step.

Which Method Should You Choose?

  • ✅ Google Fonts Import → Best for quick setups and prototypes
  • ✅ Local Fonts (@font-face) → Best for production apps or when you want full control
  • ✅ Variable Fonts → Best for performance and flexibility (one file, all weights)
  • ✅ @theme Variables → Best for scalable, modern setups

Top comments (0)