Sass @font-face doesn't work properly when loading custom fonts

Question

I'm trying to load custom fonts, but it doesn't seem to load properly.

@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;
}

The code above outputs the used fonts to all be bold. It also somehow just works when I do not include the format(" ") syntax. I am not entirely sure why. On top of that, I was getting some compile error when I created a _fonts.scss mixin with react. It worked fine for my previous projects, but for some reason this error is occurring on react. However, the other error involving format, and bold also occurred in my previous projects.

Could someone help me out?

This is the error that I get when compiling:

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'