NextJS项目开发阶段字体生效，生产环境Google Fonts不加载求助

问题背景 #

开发的电商测试产品UI已完成，本地开发时通过**@import**引入的Google Fonts显示正常，但部署到生产环境后字体完全没生效。项目代码在gym-ecommerce目录（属于NextJs仓库），有「正常加载字体」和「生产环境无字体」的效果对比图。

已尝试方案 #

目前正在切换方案：放弃Google Fonts在线导入，改用本地下载的字体文件。

本地字体配置步骤（补充完善） #

如果要落地本地字体方案，按以下步骤操作即可：

1. 从Google Fonts官网下载对应字体的完整包，包含woff2、woff等兼容格式
2. 在项目public目录下新建fonts文件夹，把字体文件放进去
3. 在全局样式文件（比如globals.css）里添加@font-face声明：

@font-face {
  font-family: 'FontName'; /* 替换成你使用的字体名称 */
  src: url('/fonts/FontName-Regular.woff2') format('woff2'),
       url('/fonts/FontName-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* 优化字体加载时的视觉体验 */
}

4. 把原来使用Google Fonts的地方，字体名称替换为上述声明的FontName

若想继续使用在线导入的排查点 #

如果仍倾向于Google Fonts在线加载，可排查以下内容：

• 生产环境服务器/CDN是否屏蔽了Google域名，导致无法拉取字体资源
• 检查next.config.js中的资源配置，是否限制了外部资源加载
• 核对@import语句的正确性，生产环境下是否存在拼写错误或路径问题

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