Next.js项目加载本地自定义Poppins字体失败问题求助

问题原因 #

1. 字体资源路径配置错误 #

你的字体样式文件style.css存放在/public/fonts/poppins/目录下，和字体文件同级，但@font-face配置中的src路径存在两处错误：

• 部分字体路径未加相对路径前缀：比如400权重的首行src: url("poppins-v15-latin-regular.eot")、600权重的多个路径都缺少./前缀，浏览器会直接从站点根目录查找字体文件，返回404
• 相对路径解析规则不匹配：通过<link href="/fonts/poppins/style.css">引入的样式文件，内部./开头的相对路径会被解析为/fonts/poppins/xxx，但部分路径缺少前缀会被解析为/xxx，和实际存放路径不匹配。

2. 引入方式未适配Next.js规则（可选优化项） #

当前通过next/head直接引入public目录下的样式文件，未使用Next.js内置的字体优化能力，生产环境可能出现加载优先级、布局偏移等问题。

解决方案 #

方案1：直接修复现有路径配置 #

将/public/fonts/poppins/style.css中所有src的字体路径统一修改为站点根目录绝对路径，避免相对路径解析误差：

/* poppins-300 - latin 示例，其余权重配置按相同规则修改所有路径即可 */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 300;
  src: url("/fonts/poppins/poppins-v15-latin-300.eot");
  src: local(""),
    url("/fonts/poppins/poppins-v15-latin-300.eot?#iefix") format("embedded-opentype"),
    url("/fonts/poppins/poppins-v15-latin-300.woff2") format("woff2"),
    url("/fonts/poppins/poppins-v15-latin-300.woff") format("woff"),
    url("/fonts/poppins/poppins-v15-latin-300.ttf") format("truetype"),
    url("/fonts/poppins/poppins-v15-latin-300.svg#Poppins") format("svg");
  font-display: fallback;
}

修改后重启项目即可正常加载字体。

方案2：使用Next.js内置next/font能力（推荐，Next.js 13及以上版本适用） #

这是官方推荐的本地字体加载方案，自带资源优化、无布局偏移，无需手动配置@font-face：

1. 将字体文件从public目录移动到源码目录下的fonts文件夹（比如/src/fonts/）
2. 在_app.tsx中引入并配置字体：

import localFont from 'next/font/local'
import AppHeader from "./components/appHeader";
import Header from "./layout/header";

// 配置Poppins字体
const poppins = localFont({
  src: [
    { path: '../fonts/poppins-v15-latin-300.ttf', weight: '300', style: 'normal' },
    { path: '../fonts/poppins-v15-latin-regular.ttf', weight: '400', style: 'normal' },
    { path: '../fonts/poppins-v15-latin-600.ttf', weight: '600', style: 'normal' }
  ],
  display: 'fallback'
})

function MyApp({ Component, pageProps }) {
  return (
    <div className={poppins.className}>
      <AppHeader />
      <div className="app">
        <Header></Header>
        <Component {...pageProps} />
      </div>
      <div id="modal-root"></div>
    </div>
  );
}

export default MyApp;

3. 可删除原有Head中引入的字体样式文件链接，配置完成后直接生效。

内容的提问来源于stack exchange，提问作者batgerel.e