Next.js Discord

Discord Forum

Inter Font Not working in production

Answered
N0_F4C3 posted this in #help-forum
Open in Discord
N0_F4C3OP
Hello Guys Inter font stopped working in production any idea how to fix ?
Answered by Dayo
try adding preload: false to the font object. this fixes the preload issue locally but see if it works for your case

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-inter',
  preload: false
})
View full answer

42 Replies

@N0_F4C3 Hello Guys Inter font stopped working in production any idea how to fix ?
Northeast Congo Lion
google or locally hosted font? Can you provide code snippet
N0_F4C3OP
google via, import { Inter, Roboto_Mono } from 'next/font/google'
clasic leayout code 
 return (
    <html lang={locale} className={`${inter.variable} ${sohogothicpro.variable} `}>
      <NextAuthProvider>
        <body>
          <NextIntlClientProvider locale={locale} messages={messages} >
            <div className='hidden xl:inline z-50'>
              <Menu />
            </div>
            <div className='inline xl:hidden z-50'>
              <MenuMobile />
            </div>
            <div className='min-h-screen'>
              {children}
              <Analytics />
            </div>
            <div className='bg-[#0C1B26] pb-[50px]'>
              <Footer />
            </div>
          </NextIntlClientProvider>
        </body>
      </NextAuthProvider>
    </html>
  );
Northeast Congo Lion
and it works locally u say?
as per docs
dumbboy
He probably uses variable to use it in tailwind, If I'm not wrong
N0_F4C3OP
the full code is like this :
import './globals.css'



import { Inter, Roboto_Mono } from 'next/font/google'
import localFont from 'next/font/local'







interface LocaleLayoutProps {
  children: ReactNode;
  session: any; // Add the session property
  params: {
    locale: string;
  };
}

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-inter',
})
const sohogothicpro = localFont({
  variable: '--font-sohogothicpro',
  src: [
    {
      path: './fonts/SohoGothicPro-Regular.otf',
      weight: '400',
      style: 'normal',
    },
    
  ]
})
export default async function LocaleLayout({ children, session, params: { locale } }: LocaleLayoutProps) {
  let messages;

  try {
    messages = (await import(`../../messages/${locale}.json`)).default;
  } catch (error) {
    console.log(error)
    console.log("not found the language package")
    notFound(
  return (
    <html lang={locale} className={inter.className}>
      <NextAuthProvider>
        <body>
          <NextIntlClientProvider locale={locale} messages={messages} >
            <div className='hidden xl:inline z-50'>
              <Menu />
            </div>
            <div className='inline xl:hidden z-50'>
              <MenuMobile />
            </div>
            <div className='min-h-screen'>
              {children}
              <Analytics />
            </div>
            <div className='bg-[#0C1B26] pb-[50px]'>
              <Footer />
            </div>
          </NextIntlClientProvider>
        </body>
      </NextAuthProvider>
    </html>
  );
}

I deleted from the code litle bit bicous of DS Nitro
I tried to use only whit inter in the className but i want to use like this :
className={${inter.variable} ${sohogothicpro.variable}}
In local server it is working correctly after build too but If I push it to Vercel it is not working. Yesterday it was fine but today it is broken
@Northeast Congo Lion as per docs
N0_F4C3OP
I'm using app not pages
Northeast Congo Lion
Hmm I usually use className on body and set variable to be used in tailwind
Any console errors
N0_F4C3OP
nope no console error. And I tried set the in tailwind primary to Inter and it is not working the locally loaded font is working only Inter is not working.
And it is intresting bicous it is not working only in production
N0_F4C3OP
Tried same result
With just this much it’s not possible to conclude decisively where the problem is
N0_F4C3OP
I can not publish the repo it is private project :/ sorry I now it is hard to find the problem like this.
Clown
Make a new project and try to reproduce this in there
Also put your fonts in public directory, and set the fonts path to "/fonts/...."
N0_F4C3OP
Is there any option that vercel have something going on ?
The local fonts are working correctly
Clown
I see
So just google ones?
N0_F4C3OP
Yep only the
import { Inter } from 'next/font/google'
but only in production over vercel
Clown
Either way, i also have issues sometimes with that fonts stuff
It just refuses to download and moves on
N0_F4C3OP
And did you find any option how to force ?
Or I ned to add manually that font 😦
Clown
I haven't had that in canary i think
Also i dont check deployment logs from vercel much
Dayo
try adding preload: false to the font object. this fixes the preload issue locally but see if it works for your case

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-inter',
  preload: false
})
Answer
@Clown Also i dont check deployment logs from vercel much
Clown
I have only faced that issue in a stable release with next start
What this means ? What is brokken or what the preload: false do ?
@N0_F4C3 What this means ? What is brokken or what the preload: false do ?
Clown
It will try and load the font in only when its needed
Unlike the usual where the font gets preloaded before its used
N0_F4C3OP
Oh okey thx, but why something like that fix the code 😄
@N0_F4C3 What this means ? What is brokken or what the preload: false do ?
Dayo
i've forgotten the exact error but it was sth related to an abort controller thing. so, it attempts to preload the fonts and if they aren't loaded immediately/if you have a not so fast internet, then the request will fail. but it only used to happen locally.

and i think it's been fixed in more recent versions. so, if you can try updating