Next.js 13添加多个本地字体失败求助

你的代码存在几个关键问题，按以下步骤修复即可：

1. 修复模板字符串错误 #

你当前用单引号包裹模板变量，这会导致变量无法解析，className无法正确注入。把单引号改成反引号：

export default function App({ Component, pageProps }) {
  return (
    <main className={`${myFonts2.className} ${myFonts.className}`}>
      <Component {...pageProps} />
    </main>
  );
}

2. 正确引用字体（两种方式任选） #

方式一：使用CSS变量（对应你定义的variable字段） #

在globals.css中通过var()引用你定义的字体变量：

/* 给需要的元素设置字体 */
.anultra-slab-text {
  font-family: var(--Anultra-Slab);
}

.intro-regular-text {
  font-family: var(--Intro-Regular);
}

然后在组件中给元素添加对应的className：

<h1 className="anultra-slab-text">使用AnultraSlab字体的标题</h1>
<p className="intro-regular-text">使用IntroRegular字体的段落</p>

方式二：直接使用字体对象的fontFamily属性 #

无需依赖CSS变量，直接在组件中通过字体对象的fontFamily字段引用：

<h1 style={{ fontFamily: myFonts.fontFamily }}>使用AnultraSlab字体的标题</h1>
<p style={{ fontFamily: myFonts2.fontFamily }}>使用IntroRegular字体的段落</p>

或者在CSS中直接使用返回的字体名称（Next.js会自动注册字体）：

h1 {
  font-family: "{myFonts.fontFamily}";
}

3. 验证字体路径正确性 #

确保public/Fonts目录下确实存在AnultraSlabRegular.ttf和IntroRegular.ttf文件，路径大小写与代码一致（Linux/macOS系统区分文件名大小写）。

内容的提问来源于stack exchange，提问作者Dr. Khouz