How to set up Nuxt with local Google Fonts' module and Tailwind?

Question

I cannot seem to get the serif font 'Source Serif Pro' to render in my app. I have also set up 'Roboto" which renders fine. I tried a few different ways in the tailwind config...array...string...font stack in double quotes as said on Tailwind site.
Not sure what I am missing here?

tailwind config

module.exports = {
  content: [
    './components/**/*.{js,vue,ts}',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './plugins/**/*.{js,ts}',
    './nuxt.config.{js,ts}',
  ],
  theme: {
    fontFamily: {
      roboto: ['Roboto', 'sans'],
      source: ['Source Serif Pro', 'serif'],
    },
    extend: {
      colors: {
        gray: {
          50: '#f4f4f4',
          100: '#000029',
          200: '#bebebe',
          300: '#555555',
          400: '#444444',
          500: '#3e3e3e',
        },
        tan: {
          400: '#d1b991',
          500: '#caae7f',
        },
        green: {
          400: '#008059',
          500: '#006846',
        },
      },
    },
  },
};

nuxt config inside 'build modules'

[
  '@nuxtjs/google-fonts',
  {
    families: {
      Roboto: {
        wght: [400, 700],
      },
      'Source+Serif+Pro': {
        wght: [400, 600],
      },
    },
    subsets: ['latin'],
    display: 'swap',
    prefetch: false,
    preconnect: false,
    preload: false,
    download: true,
    base64: false,
  },
],

Answer 1

You need to do:

• the following to have a working Nuxt font module, pretty much what you did
• need to reference the given font into Tailwind, as you achieved too
• don't forget to reference the font locally like that

---

For example for Nunito

@font-face {
  font-display: swap;
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  src: local('Nunito Regular'), local('Nunito-Regular'),
    url('~assets/fonts/Nunito-400-cyrillic-ext1.woff2') format('woff2');
}