如何在 TailwindCSS/Flowbite 中添加自定义 TTF 字体系列？

Question

我想向我的项目添加自定义字体系列：Horyzen（ttf 格式）

---

./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;
}

---

我的字体文件在这里：./assets/fonts/

在 HTML 文件中，我尝试导入字体系列：

<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>

我的字体系列不适用。

Answer 1

解决方案：将 'ttf' 替换为 'truetype'

@font-face {
    font-family: 'Horyzen-bold';
    src: url('../fonts/Horyzen-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Horyzen-extra-bold';
    src: url('../fonts/Horyzen-Extra-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Horyzen-headline';
    src: url('../fonts/Horyzen-Headline.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Horyzen-light';
    src: url('../fonts/Horyzen-Light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Horyzen-regular';
    src: url('../fonts/Horyzen-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}