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