'Custom @font-face Tailwind

I've been working on a project using Tailwind. I'm trying to put a downloaded custom font using @font-face but it doesn't seem to load properly. By the way I put my font in public/assets/font .Please check my attempt below:

Here is the style.css file:

@tailwind base;
@tailwind components;
@tailwind utilities;
@font-face {
      font family: Trade Gothic LT;
      src: url("../public/assets/font/TradeGothicLT.woff") format("woff");
}

And here is the tailwind.config.js file:

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'body': ["Trade Gothic LT"]
      },
    },
  },
};

Please tell me where I went wrong. Thank you.



Solution 1:[1]

According to Tailwind official page:

Tailwind does not automatically escape font names for you. If you’re using a font that contains an invalid identifier, wrap it in quotes or escape the invalid characters.

{
  // Won't work:
  'body': ['Trade Gothic LT', ...],

  // Add quotes:
  'body': ['"Trade Gothic LT"', ...],

  // ...or escape the space:
  'body': ['Trade\\ Gothic\\ LT', ...],
}

Solution 2:[2]

In addition to the answer by saboshi69: https://stackoverflow.com/a/69162193/8040054

There is a little problem in your code in style.css:

font-family: 'Trade Gothic LT';

You need to add font name in quotes

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 saboshi69
Solution 2 Piyush Aggarwal