Next.js Discord

Discord Forum

Font Issue

Unanswered
Northeast Congo Lion posted this in #help-forum
Open in Discord
Northeast Congo LionOP
import './globals.css'
import Header from '@/components/Header'
import localFont from 'next/font/local'

export const metadata = {
  title: 'Mockify',
  description: 'Generated by create next app',
}

const font = localFont({ 
  src: './localfont/RoslindaleText-Regular.woff2',
  formats: ['woff2'],
  fontWeight: 'normal',
  fontDisplay: 'swap', 
})

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body >
        <Header />
        <main className={font.className}>
        {children}
        </main>
        </body>
    </html>
  )
}

17 Replies

Northeast Congo LionOP
i am trying to import localfont but having this issue
Satin Angora
So first thing i've noticed here is that in the error its importing localFont from '' an empty path
So that leads me to believe theres an issue with the next/font/local
I believe with next/font/local you need to import them as modules..

For instance import {inter} from 'next/font/local'
Disregard that, I think the main issue is where the font is in the path..

Are you able to provide a screenshot of the project structure that you have?
Northeast Congo LionOP
solved , there was a issue from server end
restarted the server and it solved
Satin Angora
Ah well those are the nice quick and easy fixes then!
Northeast Congo LionOP
:please_cat:
yeah
figured out that in error localfont is empty address
means it was not up to date
Satin Angora
Yeah I noticed that as well so I thought maybe incorrect path
But more likely that you added the asset while the server was running and it never properly updated the files since it wasnt a react component etc
Northeast Congo LionOP
hmm
makes sense