Setup

Using Google Fonts in your Nuxt project

Installation

Install @nuxtjs/google-fonts dependency to your project:

npx nuxi@latest module add google-fonts

Add it to your modules section in your nuxt.config:

nuxt.config (Nuxt 3)

export default defineNuxtConfig({
  modules: ["@nuxtjs/google-fonts"],
});

Options

You can customize the module's behavior by using the googleFonts property in nuxt.config:

nuxt.config

export default defineNuxtConfig({
  googleFonts: {
    // Options
  },
});

It is also possible to add the options directly in the module declaration:

nuxt.config

export default defineNuxtConfig({
  modules: [
    [
      "@nuxtjs/google-fonts",
      {
        families: {
          Roboto: true,
          Inter: [400, 700],
          "Josefin+Sans": true,
          Lato: [100, 300],
          Raleway: {
            wght: [100, 400],
            ital: [100],
          },
          Inter: "200..700",
          "Crimson Pro": {
            wght: "200..900",
            ital: "200..700",
          },
        },
      },
    ],
  ],
});

See the module options.

TailwindCss

Install @nuxtjs/tailwindcss dependency to your project:

npx nuxi@latest module add tailwindcss

Add it to your modules section in your nuxt.config:

nuxt.config (Nuxt 3)

export default defineNuxtConfig({
  modules: ["@nuxtjs/tailwindcss"],
});

Configure your desired google font:

export default defineNuxtConfig({
  googleFonts: {
    families: {
      Roboto: true,
      // Other fonts
    },
  },
});

Head over to your tailwind.config.js file and configure your font(s):

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["..."],
  theme: {
    extend: {
      fontFamily: {
        Roboto: "Roboto",
        // Other fonts
      },
    },
  },
  plugins: [],
};

Now you can go ahead and use your font:

<div class="grid place-items-center w-full min-h-screen">
  <p class="font-Roboto">Hello @nuxtjs/google-fonts + @nuxtjs/tailwindcss</p>
</div>

Getting StartedOptions