How to Use Google Fonts (Poppins) in Tailwind CSS

Using custom fonts like Poppins in Tailwind CSS requires a few simple steps. This guide will walk you through importing the font and configuring Tailwind to use it efficiently.

Step 1: Import the Google Font

The easiest way to use Google Fonts is by importing them via a <link> tag in your index.html file:

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

Alternatively, you can use @import in your CSS file:

/* styles.css */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

Step 2: Configure Tailwind to Use the Font

Modify your tailwind.config.js file to include Poppins as a font option:

// tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Poppins', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  plugins: [],
}

By using extend, we keep the default Tailwind fonts while adding Poppins.

Step 3: Use the Font in Your Project

You can now apply the font using Tailwind’s font-sans class:

<h1 class="font-sans text-3xl font-bold">This is a Poppins Heading</h1>
<p class="font-sans text-lg">This is a paragraph using Poppins.</p>

Alternatively, if you want to create a dedicated class for Poppins:

.font-poppins {
  font-family: 'Poppins', sans-serif;
}

Then use it like this:

<p class="font-poppins text-lg">This is a paragraph using Poppins.</p>

Alternative: Using Local Fonts

If you have downloaded the Poppins font, you can add it manually with @font-face:

/* styles.css */
@font-face {
  font-family: 'Poppins';
  src: url('/fonts/Poppins-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

Then modify tailwind.config.js to use the local font.

FAQs

1. Why is my font not applying?

Ensure you've imported the font correctly and that your Tailwind class is being used properly. Also, check if other styles are overriding it.

2. How do I set Poppins as the default font?

Modify the html tag in your base.css file:

@layer base {
  html {
    font-family: 'Poppins', sans-serif;
  }
}

3. How can I use multiple font weights?

Ensure you import the font weights you need in the Google Fonts link:

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

Then, use Tailwind's font-weight utilities:

<p class="font-sans font-light">Light Text</p>
<p class="font-sans font-bold">Bold Text</p>