vue.jsfontsnuxt.jsgoogle-font-api

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


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.


Solution

  • 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.

    enter image description here