Next.js Discord

Discord Forum

google fonts is not working on localhost but works in deploy domain

Answered
Somali posted this in #help-forum
Open in Discord
SomaliOP
has anyone had this problem?
I think this happened when I started using my non-SSL API backend.
I don't have 404 errors in the font, it's just that my fonts use fallback like they don't load.
I already installed ssl, but the problem remains
Answered by Dayo
well, i've encountered this issue with Next 13 but as described in this thread below. i'm not 100% sure what's happening in your case. but if it worked before, try some of the recommendations in the thread

https://nextjs-forum.com/post/1128431714323144784
View full answer

20 Replies

SomaliOP
anyone?
@Somali anyone?
Dayo
any errors in your terminal?
@Dayo any errors in your terminal?
SomaliOP
no, only that .
guess this from chrome extention
@Somali no, only that . guess this from chrome extention
Dayo
i mean in your code editor
@Dayo i mean in your code editor
SomaliOP
yeah, i have this on start dev server.
i try to check this err
Dayo
what does your layout.jsx file look like?
@Dayo what does your layout.jsx file look like?
SomaliOP
Dayo
why's clsx underlined?
@Dayo why's clsx underlined?
SomaliOP
this spell checker
@Somali yeah, i have this on start dev server. i try to check this err
Dayo
i think this error is due to the casing of your file path. see if this helps fix it

https://github.com/vercel/next.js/issues/10739#issuecomment-612324746
but as per your original issue, i don't see your font loaded in the network tab. how are you importing it?
@Dayo but as per your original issue, i don't see your font loaded in the network tab. how are you importing it?
SomaliOP
i import in app js,
on my vercel deploy font load correct
Dayo
try removing the clsx from the className
@Dayo try removing the clsx from the className
SomaliOP
same result
Dayo
wait, how come you're using the _app file with the next/font? what version of Next are you using?

and where is your css variable declared?
@Dayo wait, how come you're using the _app file with the next/font? what version of Next are you using? and where is your css variable declared?
SomaliOP
next js 13

I will also clarify that at the start of the development of this project, everything worked correctly. At some point, the fonts fell off, I don’t know at what
as you can see, next js use fallback font
Dayo
well, i've encountered this issue with Next 13 but as described in this thread below. i'm not 100% sure what's happening in your case. but if it worked before, try some of the recommendations in the thread

https://nextjs-forum.com/post/1128431714323144784
Answer
Dayo
awesome!