Next.js Discord

Discord Forum

local fonts folder 📂 in public/fonts not work

Answered
Pavement ant posted this in #help-forum
Open in Discord
Pavement antOP
I have a fonts folder as a static file and the font format is .ttf. I noticed this is not picked up by Nextjs as a static file and not viewable.

I have a globals.css file where I am using tailwind by calling the fonts file below.

@font-face {
font-family: "Rubik Dirt Display";
font-style: normal;
font-weight: 100 900;
src: local("Rubik Dirt Display"), url("/fonts/RubikDirt-Regular.ttf") format("truetype");
}


When Nextjs builds static files, I can't see my font inside the .next

Any help as I have gone through documentation :next1:
Answered by Pavement ant
Thanks @joulev for your Last Response 😁, I was able to figure out the issue..

@fontface

I used the wrong format.

format(ttf) instead of format(truetype)
View full answer

6 Replies

@joulev You may not be able to find it but it should still be accessible in /fonts/whatever.ttf no?
Pavement antOP
Not showing up at all.

There's a second project where I have the font format as .woff, I can see all the fonts on my browser sources developer tools but not for .ttf
@joulev as in, can you go to http://localhost:3000/fonts/whatever.ttf and the font file is downloaded?
Pavement antOP
This is working but the fonts not applying
Pavement antOP
Thanks @joulev for your Last Response 😁, I was able to figure out the issue..

@fontface

I used the wrong format.

format(ttf) instead of format(truetype)
Answer
joulev
oh i see, glad it works