How to Use Google Fonts in a Nuxt 3 + Tailwind CSS Project

A clean and easy guide to setting up custom fonts using Nuxt modules.

1. Install Tailwind and Google Fonts Modules

Nuxt offers official modules for both Tailwind CSS and Google Fonts. To install them, just run the following commands:

# Install Tailwind CSS
npx nuxi@latest module add tailwindcss

# Install Google Fonts
npx nuxi@latest module add google-fonts

These commands will automatically configure the basics for you, including adding the necessary module entries and creating any required files. No manual setup needed (yet)!

---

2. Configure nuxt.config.ts and set up main.css

Open your nuxt.config.ts file and make sure it includes both modules and the fonts you want to use:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    "@nuxtjs/tailwindcss",
    "@nuxtjs/google-fonts",
  ],
  googleFonts: {
    families: {
      Poppins: true,
      Inter: true,
      Montserrat: true,
      Roboto: true,
      // Add more families as needed
    },
  },
  css: ['~/assets/css/main.css'], // To be created at the root project
});

Now create a CSS file at assets/css/main.css and add the following content:

// assets/css/main.css
@import "tailwindcss";

@theme {
  --font-poppins: 'Poppins';
  --font-roboto: 'Roboto';
  --font-montserrat: 'Montserrat';
  --font-inter: 'Inter';
  /* Add the variables of your fonts */
}

These CSS variables will help you reference the fonts in Tailwind later on.

---

3. Use Fonts in Your Components

Now you can directly use your fonts in any component:

<template>
  <div class="p-8 space-y-4">
    <h1 class="text-3xl font-bold font-montserrat">
      Welcome to My Vue App
    </h1>
    <p class="text-lg font-poppins">
      This is the home page.
    </p>
  </div>
</template>

The classes like font-montserrat are now fully recognized by Tailwind.

4. Try!

Run the following commands to test your app:

npm run dev

---

Final Thoughts

With just a few steps:

• You get your Google Fonts downloaded

• You can use Tailwind classes like .font-inter with zero effort.

• You keep your app fast, beautiful, and customizable.

You’re now free to mix and match fonts, create beautiful layouts, and stay fully in control of your design system, the Nuxt + Google Fonts + Tailwind way. 🚀