How to add a custom TTF font-family in TailwindCSS/Flowbite?

Question

I would like to add a custom font-family to my project : Horyzen (ttf format)

---

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

---

My font files are here : ./assets/fonts/

Screenshot of the files

In a HTML file, I tried to import the font-family :

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

My font-family doesn't applies.

Answer 1

Solution : replace 'ttf' by '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;
}