Next.js Discord

Discord Forum

How to use different weights of font?

Answered
Acacia-ants posted this in #help-forum
Open in Discord
Avatar
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?
.your-class {
  font-weight: 300;
}

If you use tailwind then https://tailwindcss.com/docs/font-weight
View full answer

6 Replies

Avatar
Use normal css for that?
.your-class {
  font-weight: 300;
}

If you use tailwind then https://tailwindcss.com/docs/font-weight
Answer
Avatar
Acacia-antsOP
so after doing like <div classname = {${barlow.classname} }> abc </div> I have to create/use a tailwind class to do that?
Avatar
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
Avatar
Acacia-antsOP
okay got it
thanks for the help mate!!