fonts usage help
Answered
thatsmokshanirugutti posted this in #help-forum
Answered by B33fb0n3
wherever you add your inter variables also add your other font as variables. Don't worry, it won't be applied to anything, but then nextjs knows that it needs to download the font. It could look like this: (see attached)
Green arrow is what you need to add (of course with your variable name)
Green arrow is what you need to add (of course with your variable name)
19 Replies
@thatsmokshanirugutti unable to use multiple fonts.
wherever you add your inter variables also add your other font as variables. Don't worry, it won't be applied to anything, but then nextjs knows that it needs to download the font. It could look like this: (see attached)
Green arrow is what you need to add (of course with your variable name)
Green arrow is what you need to add (of course with your variable name)
Answer
After you done that, check the network tab if both fonts are correctly downloaded
@B33fb0n3 After you done that, check the network tab if both fonts are correctly downloaded
i'm bit confused cuz if i add className={
${inter.className} ${DancingScript.variable} ${headlines.variable}} that green line then it will cause error right since headlines is a defined variable.is there is a import or something?
@thatsmokshanirugutti is there is a import or something?
you need to add that font in tailwind config
@thatsmokshanirugutti i'm bit confused cuz if i add className={`${inter.className} ${DancingScript.variable} ${headlines.variable}`} that green line then it will cause error right since headlines is a defined variable.
yea, I named my font
headlines. Yours might be named different. That's why I said(of course with your variable name)
@thatsmokshanirugutti what's the result of this https://nextjs-forum.com/post/1324642578859032667#message-1324644760870457395 <--- click
i can see both fonts, i have one small doubt
inside the popup
font 40px inter,"inter fallback" what does it mean
is the font inter or does that mean we specified inter but it fall backed to something else because it does not find the specified font?
inside the popup
font 40px inter,"inter fallback" what does it mean
is the font inter or does that mean we specified inter but it fall backed to something else because it does not find the specified font?
@B33fb0n3 should it look like this? Does it work correctly right now? 🤔
Can you clarify it a bit?
i can see two different fonts on screen which is want i required but I'm not sure second font is Inter for use because it is showing that fall back thing at side
so i have tried to add some more fonts to test it and while I was doing , got these error
so i have tried to add some more fonts to test it and while I was doing , got these error
can't understand why that error (red line)
@thatsmokshanirugutti i can see two different fonts on screen which is want i required but I'm not sure second font is Inter for use because it is showing that fall back thing at side
so i have tried to add some more fonts to test it and while I was doing , got these error
you can read through the typescript error and it tells you, that
If you have issues in reading typescript issues (me too), then you can use this extension: https://github.com/yoavbls/pretty-ts-errors
weight is not defined: (see attached)If you have issues in reading typescript issues (me too), then you can use this extension: https://github.com/yoavbls/pretty-ts-errors
it is working
for this
i needed to add weight before variable it seems
for this
const roboto = Roboto({
weight :"400",
variable : "--font-roboto"
})i needed to add weight before variable it seems
yes, that's what I just said 🙂
@thatsmokshanirugutti Is your initial issue [solved like that](https://nextjs-forum.com/post/1324642578859032667#message-1324644489070903346)?
@B33fb0n3 <@730997456980148274> Is your initial issue [solved like that](https://discord.com/channels/752553802359505017/1324642578859032667/1324644489070903346)?
yes, it is working as required now
thanks mate
thanks mate
happy to help