NextJS中本地字体Stigfier无法加载的问题求助

你的核心问题是字体路径配置错误：Next.js的public目录是静态资源的根目录，所有静态资源引用时直接以/开头指向public内的文件即可，不需要加/../public前缀。以下是三种加载方式的修正方案：

1. 全局CSS文件（styles/styles.css）修正 #

修改@font-face的src路径，去掉多余的/../public：

@font-face {
    font-family: Stigfier;
    src:
         url('/fonts/stigfier/Stigfier.woff') format('woff'),
         url('/fonts/stigfier/Stigfier.woff2') format('woff2'),
         url('/fonts/stigfier/Stigfier.ttf') format('truetype'),
         url('/fonts/stigfier/Stigfier.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: Stigfier;
}

2. 使用@next/font/local的正确写法 #

同样修正src路径，同时建议多格式兼容：

import localFont from '@next/font/local'

// 同时指定多个格式提升兼容性
const stigfier = localFont({
  src: [
    { path: '/fonts/stigfier/Stigfier.woff2', format: 'woff2' },
    { path: '/fonts/stigfier/Stigfier.woff', format: 'woff' },
    { path: '/fonts/stigfier/Stigfier.ttf', format: 'truetype' },
  ],
  weight: '400',
  style: 'normal'
})

export default function MyApp({ Component, pageProps }) {
  return (
    <div className={stigfier.className}>
      <Component {...pageProps} />
    </div>
  )
}

3. _document.jsx中预加载字体的修正 #

修正href路径：

<link
  rel="preload"
  href="/fonts/stigfier/Stigfier.ttf"
  as="font"
  type="font/ttf"
  crossOrigin="anonymous"
/>

额外检查点 #

• 确认字体文件实际存放在项目根目录的public/fonts/stigfier/下，文件名、扩展名的大小写和代码中完全一致（Linux服务器部署时区分大小写）
• 清除浏览器缓存后重新测试，避免旧缓存导致的加载异常

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