Next.js 14使用next/font遇字体404错误，求原因及解决方法

错误原因 #

1. 缓存残留：切换字体加载方式（从Google Fonts到本地字体）后，Next.js开发服务器的缓存中仍保留了旧的字体哈希路径，导致请求不存在的文件，触发404错误。
2. 预加载不匹配：配置了preload: true但部分字体变体（字重/子集）未在页面中实际使用，浏览器预加载后检测到文件未被及时使用，抛出警告；同时Next.js可能尝试打包未被引用的字体变体，导致文件不存在。
3. 本地字体路径错误：本地字体文件的相对路径配置不正确，Next.js无法正确打包这些字体，导致请求404。

解决步骤 #

1. 清理缓存并重启服务 #

这是解决缓存残留问题的首要步骤：

• 停止当前Next.js开发服务器
• 删除项目根目录下的.next文件夹
• （可选）删除node_modules/.cache文件夹（如果存在）
• 重新执行npm run dev启动服务

2. 优化Google Fonts配置（若使用此方式） #

• 移除未使用的子集和字重：比如如果页面不需要阿拉伯文内容，去掉Amiri的arabic子集；如果没用到某个字重，从weight数组中删除
• 按需设置preload：仅对首屏必需的字体启用preload: true，非首屏字体设为preload: false，减少不必要的预加载请求

  export const fontAmiri = Amiri({
    subsets: ["latin"], // 仅保留用到的子集
    display: "swap",
    style: ["normal"],
    weight: ["400"], // 仅保留用到的字重
    variable: "--font-amiri",
    preload: true, // 仅首屏字体启用预加载
  });
  

3. 修正本地字体配置（若使用此方式） #

• 确认字体文件位置：确保字体文件放在Next.js能正确识别的目录，比如public/fonts下，路径需对应配置：

  export const fontAmiri = localFont({
    src: [
      {
        path: "./fonts/amiri-regular.ttf", // 对应public/fonts下的文件
        weight: "400",
        style: "normal",
      },
      {
        path: "./fonts/amiri-bold.ttf",
        weight: "700",
        style: "normal",
      },
    ],
    variable: "--font-amiri",
  });
  

• 确保字体变量正确应用到全局：在根布局文件（layout.tsx或_app.tsx）中，将字体变量添加到根元素的className：

  import { fontAmiri, fontFigtree } from './fonts';
  
  export default function RootLayout({ children }) {
    return (
      <html lang="en" className={`${fontAmiri.variable} ${fontFigtree.variable}`}>
        <body>{children}</body>
      </html>
    );
  }
  

4. 排查字体变体使用情况 #

• 检查页面中是否真的用到了配置的所有字重（400/700），如果某个字重未被使用，从字体配置中移除，避免Next.js打包未被引用的字体文件
• 确保CSS中正确使用了字体变量，比如：

  body {
    font-family: var(--font-figtree);
  }
  .arabic-text {
    font-family: var(--font-amiri);
  }
  

5. 处理预加载警告 #

• 若不需要预加载某些字体，直接关闭preload: true，依赖display: 'swap'保证字体加载体验
• 若必须预加载，确保Next.js自动生成的link标签带有正确的as="font"属性（Next.js的font组件默认会处理，无需手动配置）

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