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