How to use different weights of font?
Answered
Acacia-ants posted this in #help-forum
Acacia-antsOP
I'm importing a font provided in google font imports from nextjs. I'm importing it like this my question is how can I use this font by using its different weights in the class tags.
const barlow = Barlow({
subsets: ["latin"],
weight: ["100", "300", "200", "400"],
});Answered by joulev
Use normal css for that?
If you use tailwind then https://tailwindcss.com/docs/font-weight
.your-class {
font-weight: 300;
}If you use tailwind then https://tailwindcss.com/docs/font-weight
6 Replies
joulev
Use normal css for that?
If you use tailwind then https://tailwindcss.com/docs/font-weight
.your-class {
font-weight: 300;
}If you use tailwind then https://tailwindcss.com/docs/font-weight
Answer
Acacia-antsOP
so after doing like
<div classname = {${barlow.classname} }> abc </div> I have to create/use a tailwind class to do that?joulev
If you are using tailwind you can use a tailwind class, else you just… specify the font weight with css/inlined style like you would do for text colours, font size, etc
It’s just css
Acacia-antsOP
okay got it
thanks for the help mate!!