Next.js Discord

Discord Forum

VERCEL: Module not found: Can't resolve '../assets/fonts/xxxxx.otf'

Answered
Pteromalid wasp posted this in #help-forum
Open in Discord
Pteromalid waspOP
Hi, I'm currently working on a projet that require a local font. I've follow the documentation (https://nextjs.org/docs/pages/building-your-application/optimizing/fonts#local-fonts) and it's perfectly works in development mode. When I try to deploy on Vercel I have this error: Module not found: Can't resolve '../assets/fonts/xxxxx.otf'. Is this a known bug/problem? Or Am I missing something? Thanks!

/app/layout.tsx:
const xxxFont = localFont({
  src: [
    {
      path: "../../assets/fonts/xxxxx-medium.otf",
      weight: "500",
      style: "normal",
    },
    {
      path: "../../assets/fonts/xxxxx-medium-italic.otf",
      weight: "500",
      style: "italic",
    },
    {
      path: "../../assets/fonts/xxxxxx-black.otf",
      weight: "800",
      style: "normal",
    },
  ],
});
Answered by Pteromalid wasp
EDIT: it was a typo italic to Italic. vsCode on mac is not case sensitive, but vercel is!
View full answer

13 Replies

Cuvier’s Dwarf Caiman
But I try It's working fine on vercel
Pteromalid waspOP
What?
outdatedoutdatedoutdated
Can I look at your folder structure @Pteromalid wasp
@outdatedoutdatedoutdated Can I look at your folder structure <@460391188545929226>
Pteromalid waspOP
Of course!
The fonts are imported inside the /app/[locale]/layout.tsx and are inside the /assets/fonts
@Pteromalid wasp Of course!
outdatedoutdatedoutdated
I believe since the font files need to accesed publically the fonts folder need to in the public folder.
Pteromalid waspOP
I tried to moove the fonts folder inside /public, got the same error
Cuvier’s Dwarf Caiman
create font.ts file in same asset/folder then export font

export const roboto = localFont({
src: [
{
path: './Roboto-Regular.woff2',
weight: '400',
style: 'normal',
},
{
path: './Roboto-Italic.woff2',
weight: '400',
style: 'italic',
},
{
path: './Roboto-Bold.woff2',
weight: '700',
style: 'normal',
},
{
path: './Roboto-BoldItalic.woff2',
weight: '700',
style: 'italic',
},
],
})

and import into layout file
@Cuvier’s Dwarf Caiman create font.ts file in same asset/folder then export font export const roboto = localFont({ src: [ { path: './Roboto-Regular.woff2', weight: '400', style: 'normal', }, { path: './Roboto-Italic.woff2', weight: '400', style: 'italic', }, { path: './Roboto-Bold.woff2', weight: '700', style: 'normal', }, { path: './Roboto-BoldItalic.woff2', weight: '700', style: 'italic', }, ], }) and import into layout file
Pteromalid waspOP
Got the same error!
I created a file font.ts inside my assets/fonts and imported the exported const inside my layout.
import localFont from "next/font/local";

export const SCTO_GROTESK_B = localFont({
  src: [
    {
      path: "./Scto-Grotesk-B-Medium.otf",
      weight: "500",
      style: "normal",
    },
    {
      path: "./Scto-Grotesk-B-Medium-italic.otf",
      weight: "500",
      style: "italic",
    },
    {
      path: "./Scto-Grotesk-B-Black.otf",
      weight: "800",
      style: "normal",
    },
  ],
});

import { SCTO_GROTESK_B } from "@/assets/fonts/fonts";
Pteromalid waspOP
EDIT: it was a typo italic to Italic. vsCode on mac is not case sensitive, but vercel is!
Answer