Recently, I've been working on a project with Tailwind CSS. I encountered an issue when trying to implement a custom font using @font-face. Despite placing the font file in public/assets/font directory, it still doesn't seem to load properly. Here's my code snippet for reference:
Below is the content of style.css:
@tailwind base;
@tailwind components;
@tailwind utilities;
@font-face {
font family: Trade Gothic LT;
src: url("../public/assets/font/TradeGothicLT.woff") format("woff");
}
Additionally, here is the configuration from tailwind.config.js file:
module.exports = {
theme: {
extend: {
fontFamily: {
'body': ["Trade Gothic LT"]
},
},
},
};
I would greatly appreciate any insights or suggestions on where I may have gone wrong. Thank you!