relative path for importing local fonts works on localhost but fail in vercel deployment
Answered
Cape lion posted this in #help-forum
Cape lionOP
I am trying to import localfont in vercel as the font it works fine if i use '../../public/fonts/impact.ttf' in localhost during deploy its says module not found , if i use absolute path like /public/fonts/impact.ttf wont work in localhost and production
from one of Issue on vercel github i found out this way using path.join but tis also through an error saying <see error in Image>
from one of Issue on vercel github i found out this way using path.join but tis also through an error saying <see error in Image>
import { Navbar } from '@/components'
import './globals.css'
import type { Metadata } from 'next'
import localFont from 'next/font/local'
import { Providers } from '@/store/Provider'
import path from 'path'
let fontpath = path.join(process.cwd(),"public","fonts","impact.ttf") as string
const ImpactFont = localFont({
src: fontpath ,
variable: "--font-impact",
})
export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body className={ImpactFont.className}>
<Providers >
<Navbar />
{children}
</Providers>
</body>
</html>
)
}Answered by fuma
Or try just put the font file in the app directory, it worked for me
13 Replies
Cape lionOP
vercel error
@Cape lion I am trying to import localfont in vercel as the font it works fine if i use '../../public/fonts/impact.ttf' in localhost during deploy its says module not found , if i use absolute path like /public/fonts/impact.ttf wont work in localhost and production
from one of Issue on vercel github i found out this way using path.join but tis also through an error saying <see error in Image>
ts
import { Navbar } from '@/components'
import './globals.css'
import type { Metadata } from 'next'
import localFont from 'next/font/local'
import { Providers } from '@/store/Provider'
import path from 'path'
let fontpath = path.join(process.cwd(),"public","fonts","impact.ttf") as string
const ImpactFont = localFont({
src: fontpath ,
variable: "--font-impact",
})
export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body className={ImpactFont.className}>
<Providers >
<Navbar />
{children}
</Providers>
</body>
</html>
)
}
The error message is pretty clear, you have to give it a literal value like
â€./pathâ€. You should directly pass a relative path to src prop.Similar to their official example:
https://nextjs.org/docs/pages/building-your-application/optimizing/fonts#local-fonts
https://nextjs.org/docs/pages/building-your-application/optimizing/fonts#local-fonts
Cape lionOP
doesn't seems to work docs are for pages directory
Wrong path, you should use
../ since it’s inside of app folderCape lionOP
the following works but for local developement
@fuma Wrong path, you should use `../` since it’s inside of app folder
Cape lionOP
yes exactly but dear it not working in production environment
Or try just put the font file in the app directory, it worked for me
Answer
Cape lionOP
@fuma Or try just put the font file in the app directory, it worked for me
Cape lionOP
letme try this
works for local lets me try on vercel
works thanks