How to load google font in NuxtJS with TailwindCSS

Learn how to load & use Google Fonts in NuxtJS project with TailwindCSS

Install @nuxtjs/google-fonts package

npm install @nuxtjs/google-fonts --save

Setup @nuxtjs/google-fonts to buildModules in nuxt.config.js

export default {
  ...

  buildModules: [
    "@nuxtjs/google-fonts"
  ],

  googleFonts: {
    display: "swap",
    families: {
      Inter: {
        wght: [100, 200, 300, 400, 500, 600, 700, 800, 900]
      }
    }
  },

  ...
}

Set default font in tailwind.config.js

const defaultTheme = require("tailwindcss/defaultTheme");

module.exports = {
  purge: [
    "./components/**/*.{vue,js}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./nuxt.config.{js,ts}"
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      fontFamily: {
        sans: ["Inter", ...defaultTheme.fontFamily.sans]
      },
    },
  },
  variants: {
    extend: {}
  },
};