Next.js Discord

Discord Forum

Importing font's doesn't work for me.

Answered
Northeast Congo Lion posted this in #help-forum
Open in Discord
Northeast Congo LionOP
I have tried nearly everything, to load a font
@font-face {
  font-family: 'modica';
  src: url('../public/fonts/modica-thinitalic.woff') format('woff'); 
  font-weight: 100;
  font-style: italic;
}


I have also tried next/font/local

None of these have rendered a font for me (Yes my fonts are not currupt and do work.) I have checked network too, they are status 200 but the preview is showing no changes
Answered by Northeast Congo Lion
I've fixed it... and it's a very stranage problem, I'm using visual studio code live share from my macbook, this is because I have problems on my PC with Node and Next. Dragging the files from my pc to the directory on VScode currupted them. I had to ZIP them and download them on my macbook, that's fixed it 😐
View full answer

23 Replies

this assumes you have a file at public/fonts/modica-thinitalic.woff
Northeast Congo LionOP
Still nothing after changing the url from src: url('../public/fonts/modica-thinitalic.woff') format('woff'); to src: url('/fonts/modica-thinitalic.woff') format('woff');

I have hard reloaded and cleared cache too
@joulev this assumes you have a file at `public/fonts/modica-thinitalic.woff`
joulev
do you have a file located here?
can you show your repo structure?
Northeast Congo LionOP
website
-> app
-> public
     -> fonts
          -> modica-thinitalic.woff
          -> otherfonts.woff
@Northeast Congo Lion website -> app -> public -> fonts -> modica-thinitalic.woff -> otherfonts.woff
joulev
if you go to localhost:3000/fonts/modica-thinitalic.woff does it 404 or do you get the font?
@joulev if you go to `localhost:3000/fonts/modica-thinitalic.woff` does it 404 or do you get the font?
Northeast Congo LionOP
it downloads the font 🙂
joulev
ok then probably your css is just not working. do you have a repo link?
Northeast Congo LionOP
could I have your github username? I don't want to make it public 😄
joulev
then please make a public [minimal reproduction repository](https://nextjs-faq.com/minimal-reproduction-repository)
Northeast Congo LionOP
https://github.com/CrypticzXI/unboundstudios_website
I'll just make it public for now
@Northeast Congo Lion https://github.com/CrypticzXI/unboundstudios_website
joulev
1. remove ../public as stated above
2. in your root layout add font-modica class to your html or body element
Northeast Congo LionOP
I have removed it, just not commited it, I'm using tailwind so wouldnt it work how I have set it up?
joulev
yes i see you are using tailwind, hence i said point 2 above
Northeast Congo LionOP
Done both of them, still not working 😦
joulev
frankly speaking im clueless, i inspected the live deployment and the css rules are all there and look good, but the browser just doesn't download the font
you will probably need someone else's help here, sorry. it's 2am for me anyway so probably my brain is not functioning as it should
i'll check back tomorrow
Northeast Congo LionOP
No problem, thank you for trying, Ive been sat here for the past 5 hours trying everything optimised and not just to get a stupid font to render
Northeast Congo LionOP
I've fixed it... and it's a very stranage problem, I'm using visual studio code live share from my macbook, this is because I have problems on my PC with Node and Next. Dragging the files from my pc to the directory on VScode currupted them. I had to ZIP them and download them on my macbook, that's fixed it 😐
Answer
joulev
oh nice, glad you fixed it