Google Fonts with Tailwind and Nuxt


Create a CSS file if you haven’t already at /assets/css/main.css

Update nuxt.config.js to load the CSS file

export default defineNuxtConfig({
    ...
    css: ['~/assets/css/main.css']
})

Insert the `@import` from Google fonts into main.css

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');

Now update tailwind.config.js, extending the fontFamily with your new font

const defaultTheme = require('tailwindcss/defaultTheme')

const config = {
  theme: {
    extend: {
      fontFamily: {
        serif: ['Cormorant Garamond', ...defaultTheme.fontFamily.sans]
      }
    },
  }
};
export default config;