Sass @font-face 在加载自定义字体时无法正常工作

Question

我正在尝试加载自定义字体，但似乎加载不正确。

@font-face {
  font-family: "AvenirNextLTPro";
  src: url("./assets/font/AvenirNextLTPro-Bold.otf"),
    url("./assets/font/alt_files/AvenirNextLTPro.ttf");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "AvenirNextLTPro";
  src: url("./assets/font/AvenirNextLTPro-Bold.otf"),
    url("./assets/font/alt_files/AvenirNextLTProBold.ttf");
  font-weight: 700;
  font-style: bold;
}

上面的代码将使用的字体全部输出为粗体。当我不包含 format(" ") 语法时，它也能以某种方式工作。我不完全确定为什么。最重要的是，当我使用 React 创建 _fonts.scss 混合时，我遇到了一些编译错误。它在我以前的项目中运行良好，但由于某种原因，这个错误发生在反应中。然而，另一个涉及格式和粗体的错误在我之前的项目中也发生过。

有人可以帮我吗？

这是我在编译时得到的错误：

ERROR in ./src/App.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/App.css) 5:36-109
Module not found: Error: Can't resolve '../../assets/font/AvenirNextLTPro-Regular.otf' in '/Users/myname/BrainStation/week6/Assignments/my-name-brainflix/src'