Javascript 如何在nextjs中添加字体ttf文件

我是Nextjs的新手。我想将我的自定义字体添加到我的项目中。我完全不知道该怎么做（我的字体是“public/fonts/”）。我的global.css文件如下-

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

@font-face {
  font-family: "Avenir";
  src: url("../public/fonts/AvenirNextRoundedStd-Demi.ttf");
  src: url("../public/fonts/AvenirNextRoundedStd-MedIt.ttf");
  src: url("../public/fonts/AvenirNextRoundedStd-Reg.ttf");
}

这是我的下一个配置文件-

// next.config.js
const withCSS = require("@zeit/next-css");
module.exports = withCSS({
  /* config options here */
});

---

您应该将

公共

目录称为

/

。因此，您的CSS应该是这样的：

@font-face{
字体系列：“Avenir”；
src:url（“/fonts/AVENIRNEXTRONDESTD Demi.ttf”）；
src:url（“/fonts/AVENIRNEXTRONDESTD MedIt.ttf”）；
src:url（“/fonts/AVENIRNEXTRONDESTD Reg.ttf”）；
}

但我认为您正在尝试添加字体的多重权重。那么，你的CSS不应该是这样吗

正文{
字体系列：“Avenir”，无衬线；
}
@字体{
字体系列：“Avenir”；
字体大小：400；
src:url（“/fonts/AVENIRNEXTRONDESTD Reg.ttf”）格式（'truetype'）；
}
@字体{
字体系列：“Avenir”；
字号：500；
src:url（“/fonts/AVENIRNEXTRONDESTD MedIt.ttf”）格式（'truetype'）；
}
@字体{
字体系列：“Avenir”；
src:url（“/fonts/AVENIRNEXTRONDESTD Demi.ttf”）格式（'truetype'）；
字号：600；
}

谢谢，现在没有显示错误，但是所有字体都没有更改。是否在

正文{}

中更新字体系列？我更新了答案并添加了正文部分。是的，我已经更新了，但仍然没有成功。我还在next.config.js中添加了“next fonts”。。仍然没有成功如果您将字体文件放置在

公共

目录中，您不需要

下一个字体

。我可以将我的整个项目文件发送给您。请帮帮我。。。这是我的第一份工作，我不想失去它