Next.js 12.1.6部署Vercel后Google Fonts加载异常咨询

1. 字体链接转义错误：你在JSX的link标签href属性中手动写了&作为参数分隔符。JSX本身会自动对属性值内的&符号做转义处理，手动编写&会导致最终渲染到页面的href中，参数分隔符实际为&而非标准的&，Google Fonts接口无法正确解析Work Sans字体的参数，仅会返回部分字体规则，部分SSR缓存场景下甚至会返回空的字体响应。
2. Next.js 12字体优化逻辑冲突：Next.js 12.1.6版本默认开启Google Fonts自动优化，会在SSR阶段主动抓取字体CSS内联到页面中。你手动引入的链接格式不符合优化器的匹配规则时，优化器会直接跳过处理，但客户端路由切换阶段，Next.js的Head组件管理逻辑不会重新调整字体资源的加载优先级，导致字体请求被延后到页面渲染完成后，出现字体不加载的问题。
3. 样式优先级覆盖问题：你在_app.js中全局引入了Bootstrap CSS，Bootstrap自带全局font-family声明。客户端水合阶段，Bootstrap样式的加载优先级会高于后续注入的Google Fonts样式，导致字体规则被覆盖；硬刷新页面时浏览器缓存会让字体CSS提前加载，优先级反转所以字体正常显示；走浏览器往返缓存（bfcache）返回页面时，页面已经是完成渲染的状态，字体会保持正常。

按以下步骤操作即可解决问题：

• 修正Google Fonts链接的参数写法，删除手动添加的&，直接使用&分隔参数，JSX会自动处理转义逻辑，修正后的link标签代码如下：

<link href="https://fonts.googleapis.com/css2?family=Crete+Round&family=Work+Sans:wght@500;600&display=swap" rel="stylesheet" />

• 可选择两种方式解决字体优化冲突：
  • 方案1：在next.config.js中关闭默认字体优化，避免SSR内联逻辑和手动引入冲突：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    optimizeFonts: false,
  }
  module.exports = nextConfig
  

  • 方案2：将Google Fonts的链接从_document.js移动到_app.js的Head组件中，Next.js优化器可正确识别全局引入的标准字体链接，不会出现参数解析错误。
• 在全局样式文件globals.css的最开头显式声明全局字体规则，避免Bootstrap默认字体规则覆盖自定义字体：

/* 放在globals.css文件第一行 */
body {
  font-family: 'Work Sans', sans-serif;
}
h1, h2, h3, h4, h5, h6, .title-font {
  font-family: 'Crete Round', serif;
}

• （可选优化）添加预连接配置提升字体加载速度，在Head中补充两个预连接link标签，让浏览器提前和字体域名建立连接：

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

• 额外代码问题修复：你当前_app.js中导入的Header、SearchBlock、Footer组件没有在返回的JSX结构中渲染，部署后页面会缺失公共头尾，记得将公共组件补充到页面结构中。

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