Next.js Discord

Discord Forum

Is there a way to add custom font to specific component?

Answered
Yusuf posted this in #help-forum
Open in Discord
I have a component that will need to use a bunch of one-off fonts, I don't want to load these fonts on every page, only pages that will use that component, is this possible with next or react?
Answered by DirtyCajunRice | AppDir
iif not, just make a font util file, define them all there, then import the font.className to the div
View full answer

14 Replies

yep absolutely
are you using tailwind?
iif not, just make a font util file, define them all there, then import the font.className to the div
Answer
@DirtyCajunRice | AppDir are you using tailwind?
I am, I thought it would be harder with tailwindcss because it only has a global config
@Yusuf I am, I thought it would be harder with tailwindcss because it only has a global config
not necessarily. do you know how to use font variables?
@DirtyCajunRice | AppDir not necessarily. do you know how to use font variables?
if you mean the next/font library then I have a basic understanding
@Yusuf if you mean the next/font library then I have a basic understanding
yeah but more specifically the variable key in the font definition, as well as adding it as a reference in the tailwind config
I set a variable name and then use it in the tailwind config
@Yusuf I set a variable name and then use it in the tailwind config
exactly. You can just do that. if its a shit ton of fonts it may be cumbersome tho
@DirtyCajunRice | AppDir exactly. You can just do that. if its a shit ton of fonts it may be cumbersome tho
and those will be only fetched on the pages that use them?
@Yusuf and those will be only fetched on the pages that use them?
i believe so. if not, my other suggestion is the only way
thank you for the help!
and I'll do more research about that later