Next.js 15本地字体加载失败：无法解析字体文件路径

核心问题 #

你混淆了浏览器访问静态资源的URL路径和Next.js构建时读取字体文件的文件系统路径：

• public目录下的资源在浏览器中可以通过/fonts/woff2/YekanBakh-VF.woff2访问，但next/font/local的localFont方法是在Node.js构建环境中读取本地文件，需要使用相对于项目根目录或当前组件文件的文件系统路径，而非public的URL路径。

解决步骤 #

1. 修正路径写法
   根据你的RootLayout位置（假设在app/layout.tsx），将src改为相对于当前文件的路径：

   import localFont from 'next/font/local';
   
   const yekanBakh = localFont({
     src: '../public/fonts/woff2/YekanBakh-VF.woff2',
     // 可添加weight、style等其他配置
   });
   

   或者使用相对于项目根目录的路径：

   const yekanBakh = localFont({
     src: './public/fonts/woff2/YekanBakh-VF.woff2',
   });
   

2. 验证文件位置
   确认字体文件确实存在于项目根目录下的public/fonts/woff2/YekanBakh-VF.woff2，检查文件名大小写（Linux/macOS环境下文件名区分大小写）、目录层级是否完全匹配。

3. 额外说明
   使用next/font/local时，Next.js会自动处理字体的优化（如子集化、缓存策略等），不需要手动将字体作为静态资源通过public目录暴露，构建后字体文件会被Next.js托管在优化后的路径中。

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