Next.js Discord

Discord Forum

Font module not found

Unanswered
Dwarf Crocodile posted this in #help-forum
Open in Discord
Avatar
Dwarf CrocodileOP
Folder structure is:
-public - "font1.ttf"
-src - app - ui - font.ts

font.ts code is:
import { Rajdhani } from "next/font/google";
import localFont from "next/font/local";

export const rajdhani = Rajdhani({
  weight: ["700"],
  subsets: ["latin"],
});

export const font1 = localFont({
  src: "./font1.ttf",
});


I am geeting this error:
src\app\ui\fonts.ts
Module not found: Can't resolve './font1.ttf'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./src/app/ui/fonts.ts
./src/app/page.tsx

29 Replies

Avatar
risky
can you maybe try ../ ntill you get the font (i think its relative to file and not public like images)
Avatar
Dwarf CrocodileOP
getting this :

src\app\ui\fonts.ts
Module not found: Can't resolve '../font1.ttf'
Avatar
risky
maybe more ../ as you are in ui folder which is a few folders down from where public is
Avatar
Dwarf CrocodileOP
but public folder contents can be imported using "./filename"
?
Avatar
risky
yeah but this is next/font and that isn't the same as importing static files link image would be
Avatar
Dwarf CrocodileOP
nothing working:

src\app\ui\fonts.ts
Module not found: Can't resolve '../../../../public/font1.ttf'


and
src\app\ui\fonts.ts
Module not found: Can't resolve '../../../../font1.ttf'
Avatar
risky
wait can you actually use ttf with next/font (i have only tried it with woff) - id hope you can
Avatar
Dwarf CrocodileOP
Image
idk about that 😦
Avatar
risky
like i know i had to ../ into publicj from app dir to get my public font
Image
and they use ttf as an example 👀
Image
Avatar
Dwarf CrocodileOP
src\app\ui\fonts.ts
Module not found: Can't resolve '../../../../font2.otf'
not working with otf too
tried :

all the combinations
wait..let me keep all the font files in 'ui' folder
now, font.ts and font1.ttf are in same folder ui
Avatar
risky
wait did you ever ../../public
Image
as you are going down folders but i see not going into the public
Avatar
Dwarf CrocodileOP
did that...not working
Avatar
risky
oh 😦
Avatar
Dwarf CrocodileOP
did this
src: "./font2.otf",


still not workin
Avatar
risky
and you reset .next folder and all 😭
yeah i have no idea what next/font's issue is
Avatar
Dwarf CrocodileOP
wait...it worked
Avatar
risky
👀
what did you do to fix it 🎉
Avatar
Dwarf CrocodileOP
this 🙂
and "./font1.tff"