Как исправить реакцию маршрутизатора, отправляющего страницу 404, когда css запрашивает файл шрифта?

Question

Я пытаюсь создать глобальные шрифтовые шрифты для своего приложения, поэтому в index.jsx я импортирую fonts.css, который содержит:

@font-face {
  font-family: 'ProximaNova';
  src: url('/assets/fonts/ProximaNova-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'ProximaNova';
  src: url('/assets/fonts/ProximaNova-Medium.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'ProximaNova';
  src: url('/assets/fonts/ProximaNova-Extrabold.woff') format('woff');
  font-weight: bolder;
  font-style: normal;
}

body,
html {
  font-family: 'ProximaNova';
}

В инструментах разработчика chrome я вижу, что он пытается получить шрифт, но возвращает html вместо того шрифта, который ему действительно нужен. Это приводит к тому, что шрифт не может быть декодирован.

Я почти уверен, что это результат моего использования response-router-dom с маршрутом 404 и веб-пакетом с какой-то проблемой.

Похоже, что это тривиальная вещь, но это заняло у меня последние полтора часа, и я никуда не попал. Дайте мне знать, если мне нужно быть более ясным. Спасибо за вашу помощь