Next.js项目导入Google Fonts（Inter字体）时出现404错误求助

阿华AIGC实验室

2026-4-7

我明白你遇到这个404错误有多头疼，尤其是已经试过清理.next缓存和升级Next.js版本还是没解决的情况下。让我帮你梳理几个可能的解决方向，看看能不能搞定这个问题：

1. 优先排查网络访问限制

从错误日志里的Received response with status 404 when requesting https://fonts.googleapis.com/css2?family=Inter:wght@400&display=swap可以看出，Next.js在尝试下载Google Fonts的样式文件时失败了。首先你需要确认：

直接在浏览器里打开这个URL，看看能不能正常访问并返回CSS内容。
如果浏览器也无法访问这个链接，那大概率是网络环境限制（比如地区防火墙、代理设置、公司内网拦截）导致Next.js没法请求到Google的字体服务。

这种情况下有两个替代方案：

切换可以正常访问Google服务的网络（比如手机热点），然后重启Next.js开发服务器；
改用本地托管字体的方式：
1. 从Inter字体官方渠道下载所需权重的字体文件（比如400权重的woff2/ttf文件）；
2. 在项目里创建public/fonts目录，把字体文件放进去；
3. 用next/font/local替代next/font/google来导入：
```
import { Inter } from 'next/font/local'

const interFont = Inter({
  src: './fonts/Inter-Regular.woff2',
  display: 'swap',
  variable: '--font-inter',
})
```
4. 之后在全局CSS或者布局组件里使用这个字体变量即可。

2. 检查代码配置的细节问题

看你贴的layout.tsx代码里有"这类HTML转义字符，虽然可能是粘贴时的格式问题，但还是要确认实际代码里的字符串引号是标准的双引号"/单引号'，不要有HTML转义字符，避免Next.js解析字体配置时出现异常。

另外，你可以尝试调整字体配置的写法，比如把weight改成数组形式（即使只需要单个权重），这有时候能解决Next.js字体加载器的解析问题：

const interFont = Inter({
  subsets: ["latin"],
  display: "swap",
  weight: ["400"], // 改为数组形式
})

3. 尝试使用Variable Font模式加载

Inter字体支持Variable Font格式，用这种方式加载不仅更高效，还可能规避单权重加载时的请求问题：

import { Inter } from 'next/font/google'

const interFont = Inter({
  subsets: ["latin"],
  display: "swap",
  variable: "--font-inter", // 启用variable字体
})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={interFont.variable}>
      <body style={{ fontFamily: 'var(--font-inter)' }}>{children}</body>
    </html>
  )
}

4. 排查项目内的其他配置干扰

如果以上方法都没用，可以检查：

项目根目录的next.config.js有没有配置headers、rewrites或者redirects规则，会不会无意中拦截了Google Fonts的请求；
创建一个全新的最小化Next.js项目，只保留基础的layout.tsx和Inter字体导入代码，测试是否能正常加载，排除项目内其他依赖或者自定义配置的干扰。

希望这些方法能帮你解决问题，如果还有新的错误信息或者尝试结果，随时补充细节哦！

内容来源于stack exchange