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