I can't get the custom font to work in tailwind CSS. I've tried utilizing chat GPT, stack overflow (other posts), reddit, etc. I can't figure it out. It's just not working.
I've tried locating the file path using ./ instead of / and even tried ../ but it's not showing up in my console's network resources. Not sure if it's relevant. I tried using and directly styling the body element in the header, didn't take it. I've tried so many different methods. Cleared cache, confirmed TTF isn't corrupt, I can go on for hours about how much I've tried figuring this just out of stubbornness. I can't get it to work. Any help is appreciated.
@tailwind base;
@tailwind components;
@tailwind utilities;
@font-face {
font-family: "robotoMono";
src: url("../resources/fonts/robotoMono.ttf");
}
module.exports = {
content: [`./{html, js}`],
theme: {
extend: {
fontFamily: {
robotoMono: [`robotoMono`, `sans-serif`],
},
},
},
plugins: [],
};
<body class="font-roboto">
<div id="mainContainer">
<div id="title"><h1>Password Generator</h1></div>
/resources/fonts/robotoMono (see attached image)
I've tried applying the font styles directly to the h1 element as well. The font isn't changing at all. There's a quick little glitch that happens when hitting save (in my browser's live server) but it's like less than a second where the font changes and then reverts back to the original font. Not sure if this is relevant information.
You named the font "robotoMono". Therefore, font-roboto won't work.
Use class="font-robotoMono" instead.
If that doesn't work, consider this:
<body class="font-['robotoMono`]">