TailwindCSS/Flowbite中自定义TTF字体Horyzen无法生效的问题求助

大家好，我现在在项目里尝试给TailwindCSS搭配Flowbite添加自定义的TTF字体Horyzen，但不管怎么设置，字体都没有生效，想请各位帮忙看看哪里出问题了！

我的文件结构 #

• 字体文件全部放在 ./assets/fonts/ 目录下，包含Horyzen-Bold.ttf、Horyzen-Extra-Bold.ttf、Horyzen-Headline.ttf、Horyzen-Light.ttf、Horyzen-Regular.ttf这几个不同字重的文件
• 字体声明样式文件：./assets/css/horyzen.css
• Tailwind配置文件：./tailwind.config.js

Tailwind配置文件代码 (./tailwind.config.js) #

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    '../templates/**/*.html',
    './node_modules/flowbite/**/*.js'
  ],
  theme: {
    fontFamily: {
      light: ['Horyzen-light'],
      bold: ['Horyzen-bold'],
      regular: ['Horyzen-regular'],
      extra-bold: ['Horyzen-extra-bold'],
      headline: ['Horyzen-headline'],
    },
  },
  plugins: [
    require('flowbite/plugin')
  ],
}

字体样式声明文件代码 (./assets/css/horyzen.css) #

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

@font-face {
  font-family: 'Horyzen-extra-bold';
  src: url('../fonts/Horyzen-Extra-Bold.ttf') format('ttf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Horyzen-headline';
  src: url('../fonts/Horyzen-Headline.ttf') format('ttf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Horyzen-light';
  src: url('../fonts/Horyzen-Light.ttf') format('ttf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Horyzen-regular';
  src: url('../fonts/Horyzen-Regular.ttf') format('ttf');
  font-weight: normal;
  font-style: normal;
}

HTML中的引用和使用方式 #

我已经在HTML文件里引入了字体样式表，并且尝试用Tailwind生成的字体类来应用：

<link rel="stylesheet" type='text/css' href="{% static 'assets/css/horyzen.css' %}">

<h5 class="font-light">Lorem ipsum</h5>
<h5 class="font-bold">Lorem ipsum</h5>
<h5 class="font-regular">Lorem ipsum</h5>

目前的问题是，这些字体类完全没有生效，文字依然显示默认字体。有没有大佬能帮我排查一下可能的问题点？

备注：内容来源于stack exchange，提问作者Thibaud Garnier