Next.js应用Google Fonts本地生效但线上环境不显示如何解决

• 最核心的原因是线上环境无法正常访问Google Fonts海外节点：本地开发时通常本地网络有代理可以正常请求谷歌资源，国内生产环境服务器默认无代理，请求fonts.googleapis.com、fonts.gstatic.com会直接超时失败。
• 手动写的预连接标签属性错误：代码里crossOrigin="true"是无效值，合法取值为anonymous/use-credentials，生产环境下浏览器会因为属性不合法拦截跨域资源请求。
• Next.js生产构建会做静态资源优化，手动插入的外部字体链接不会被纳入优化流程，容易出现加载时序问题导致字体声明未生效。

直接使用Next.js内置的next/font模块，框架会在构建时自动将你用到的Google Fonts文件下载到本地，和项目静态资源打包在一起部署，完全不依赖外部谷歌服务，自动完成预加载、避免布局偏移等优化，从根源解决环境不一致问题。
配置步骤（适配你当前用的Pages Router架构）：

1. 清空_document.js中Head里所有和Google Fonts相关的标签（包括preconnect、字体CSS链接），这些都不需要手动写了。
2. 在pages/_app.js中配置需要的字体：

import { Raleway, Roboto } from 'next/font/google';
import '@/styles/globals.css'; // 替换为你项目的全局CSS路径

// 配置Raleway，指定你需要的字重、字符集
const raleway = Raleway({
  subsets: ['latin'],
  weight: ['100', '200', '300', '400'],
  variable: '--font-raleway', // 生成全局CSS变量方便调用
});

// 配置Roboto
const roboto = Roboto({
  subsets: ['latin'],
  weight: ['100', '300', '400', '500', '700', '900'],
  variable: '--font-roboto',
});

export default function App({ Component, pageProps }) {
  return (
    // 将字体变量挂载到根节点，全局可用
    <div className={`${raleway.variable} ${roboto.variable}`}>
      <Component {...pageProps} />
    </div>
  );
}

3. 修改全局CSS中的字体声明，调用框架生成的字体变量：

html,
body {
  font-family: var(--font-raleway), sans-serif;
}

/* 需要用Roboto时直接给对应元素加样式即可：
.target-class {
  font-family: var(--font-roboto), sans-serif;
}
*/

配置完成后重新执行npm run build部署即可，生产环境会直接加载本地打包的字体文件，和开发环境表现完全一致。

如果你一定要保留手动引入外部链接的写法，需要做两处修正：

1. 修正crossOrigin属性值：

<link
  rel="preconnect"
  href="https://fonts.gstatic.com"
  crossOrigin="anonymous"
/>

2. 确保生产环境服务器可以正常连通Google Fonts的域名：国内节点服务器需要配置出口代理，或者将字体CSS、字体文件下载到本地自托管，否则依然会出现加载失败问题。

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