1

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,
  },
],
kissu
  • 40,416
  • 14
  • 65
  • 133
hendy0817
  • 979
  • 2
  • 20
  • 47

2 Answers2

2

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');
}
kissu
  • 40,416
  • 14
  • 65
  • 133
  • 1
    Yep. This one works just fine. I always prefer working with local fonts instead of CDN ones. FOUT issues get resolved better. – kanuos Nov 28 '22 at 17:05
0

Nuxt Google fonts is kinda funny to work with. I tried working and ended up uninstalling the package. Try hosting the font files locally using @font-face and accessing them with the Nuxt Config css property.

I followed this guide by Gabriel Aigner to get it working for me.

kanuos
  • 985
  • 9
  • 16
  • The CDN approach is not really performant, while the local fonts' approach is a bit limited. I'll copy-pasta the approach for the Nuxt module below. – kissu Nov 28 '22 at 16:34