Nuxt.js/google-fonts部署后Nunito字重不生效问题求助

核心问题：字体家族名称不匹配 #

你在nuxt.config.js里配置引入的是Nunito字体，但CSS样式里写的是"Nunito-sans"，服务器环境下浏览器找不到对应字体文件，会自动回退到sans-serif通用字体，导致900字重无法生效（本地可能因为缓存或其他巧合暂时生效，但属于错误配置）。

具体修正步骤 #

1. 修正CSS字体家族名
   将h2的样式改成：

   h2 {
     font-family: 'Nunito', sans-serif;
     position: relative;
     z-index: 100;
     color: #fff;
     font-weight: 900;
   }
   

2. 确认Nuxt字体配置正确性
   如果你实际需要的是Nunito Sans字体（而非基础Nunito），需同步修改nuxt.config.js的配置：

   googleFonts: {
     families: {
       'Nunito+Sans': {
         wght: [800, 900],
       },
     },
   }
   

   对应的CSS也要改成：

   font-family: "Nunito Sans", sans-serif;
   

3. 清除服务器端缓存
   部署后清理Nuxt构建缓存、服务器静态文件缓存，避免旧配置残留。确保使用生产构建命令部署（如npm run build && npm run start），而非开发模式。

4. 验证字体加载状态
   部署后打开浏览器开发者工具，在「网络」面板筛选font，确认Nunito（或Nunito Sans）的900字重字体文件已成功加载。如果加载失败，检查服务器是否允许访问Google Fonts资源（部分服务器需配置代理）。

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