@nuxtjs/google-fonts ignoring other weights, works only for 400

Question

I am using google font Nuxt module to use 2 fonts in my website.
I set it correctly but it does not work and downloads only 1 font, the one it finds first in the "Families" object and does not download all weights, but only the lowest.

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

  googleFonts: {
    families: { 
      Montserrat: {
        wght: [400, 600, 700],
      },
      'Work+Sans': {
        wght: [400, 600, 700],
      },
    },
    subsets: ['latin'],
    display: 'swap',
    prefetch: false,
    preconnect: false,
    preload: false,
    download: true,
    base64: false,
  },

And this is what the folder assets/css/fonts.css looks like

/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('~assets/fonts/Montserrat-400-cyrillic-ext1.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('~assets/fonts/Montserrat-400-cyrillic2.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('~assets/fonts/Montserrat-400-vietnamese3.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('~assets/fonts/Montserrat-400-latin-ext4.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('~assets/fonts/Montserrat-400-latin5.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

PS: more info on @font-face.

Regarding my [previous answer](https://stackoverflow.com/a/68166329/8816585) on that subject, I'm not sure that you even need the `googleFonts` key before `families` here. At least, this is the main difference with my answer + it seems quite unnecessary since we're already using "Google" fonts module here. — kissu, Nov 06 '22 at 16:07
Got a public github repo? Or a simple [repro]? Pretty sure it does work. — kissu, Nov 06 '22 at 16:34
@kissu https://whimsical-kheer-e12fd4.netlify.app/ this is the live preview of the site. The nuxt.config.js is up on the post. I did the npm add module... I don't know why it doesn't work — Dimitri, Nov 06 '22 at 21:28
The result as a hosted app will not help us debug that unfortunately. — kissu, Nov 06 '22 at 21:39
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/249375/discussion-between-dimitri-and-kissu). — Dimitri, Nov 06 '22 at 22:02

score 2 · Accepted Answer · answered Nov 07 '22 at 00:24

I've updated my previous answer by adding a solution on how to fix those weight issues based on this related github issue.

Mainly, use the following in your package.json

"@nuxtjs/google-fonts": "^3.0.0-1",

That successfully fixes the issue on your project too.

@nuxtjs/google-fonts ignoring other weights, works only for 400

1 Answers1