@nuxtjs/google-fonts仅加载400字重，忽略其他字重及字体

我在Nuxt项目中使用谷歌字体模块引入两种字体，配置代码如下：

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,
  },

但配置未生效，仅下载了families对象中的第一个字体Montserrat，且仅加载了400这一种字重。生成的assets/css/fonts.css内容如下：

/* 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;
}

解决方案 #

1. 升级模块版本
   旧版本模块存在多字体加载的bug，先更新到最新版：

npm update @nuxtjs/google-fonts

2. 简化配置格式
   将字体家族的嵌套对象写法改为直接数组，避免解析异常：

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

3. 清理缓存重新构建
   Nuxt缓存可能导致配置未生效，执行命令清理后重新构建：

nuxt clean && nuxt build

4. 修正字体名称写法
   将Work+Sans替换为空格分隔的Work Sans，模块会自动处理转义逻辑。

内容的提问来源于stack exchange，提问作者Dimitri