next/font works when built locally, but not when deployed to Vercel

[BaileySimrell]

Summary

Hello everyone! I could use some help on this one as I'm genuinely stuck.

I'm seeing an odd issue where next/font works perfectly fine in localhost when using both npm run dev and npm run build / start

Maybe I am missing something obvious here, but I already tried following a few other discussions and configurations like disabling font optimization in the next.config file as well as running npx update-browserslist-db@latest which has fixed what seemed like the same error for me just last week, however nothing seems to work in this case for me.. It's also been super difficult trying to debug this as everything in the css inspector / chrome console is identical in the remote vs localhost versions, which has me very confused.

Below is what I have in our tailwind.config.js file

And below this is a screenshot of our next.config.js file

Here's a Loom video demo of the issue: https://www.loom.com/share/4ea0967fcdce447099b60b7b4054d6d2

And here are screenshots comparing the localhost vs preview branch version:

Additional information

Running on next@13.2.3 in app dir

Example

https://web-simrell-slicespace.vercel.app/

[shyankashani]

@BaileySimrell I am having the same issue. Were you able to resolve this?

[shyankashani]

@BaileySimrell I personally just fixed it by removing font optimization from my next.config.js file. Give that a shot?

[LucasBonafe]

The optimizeFonts function is true by default, when setting it to false I got the same problem as when deploying to Vercel.

Apparently Vercel defined false as the default value, I tried to fix it in a simple way:

And it didn't work.

[aaort]

For anyone who faces this issue while using MUI library. I had 'use client' directive added to my theme configuration file which caused components that were server-side rendered (e.g. layout) to have invalid font-family class attached to them. everything worked fine after I removed 'use client'.

[IFurkanCakmak]

i have never used anywhere use client i am not using mui by the way no ui libs just custom tailwind but font light works in local but not working in vercel deployement. I didnt make any custom configuration in next config. do you have any idea how to solve that?

[TopIvanAbramov]

@aaort did you solve the issues?

[aaort]

The described solution worked for me while using MUI. I'm working on another project currently and can't provide you guys with additional helpful information. @IFurkanCakmak @TopIvanAbramov

[JamesDonnelly]

For anyone calling createTheme directly in their theme config file, removing the 'use client' directive will result in an error.

Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". Or maybe you meant to call this function rather than return it.

Two ways to fix this:

• Separate the configuration from the createTheme call by moving the createTheme call into its own 'use client' file:

// theme.ts
export const theme = { ... }

// createTheme.ts
'use client';
import 'theme' from './theme';
export default createTheme(theme);

• Alternatively, move the fonts into their own file and import those directly in your layout:

// fonts.ts
import localFont from "next/font/local"
export const myFont = localFont(...)

// layout.tsx
import './fonts'

[TopIvanAbramov]

same problem, locally works just fine, Vercel raise an error

[osas2211]

Hey @TopIvanAbramov
Have you been able to find a solution to this issue?

[anselumjuju]

@TopIvanAbramov @osas2211 Any solution?, I need to launch my app to production.

[KBeDevel]

@anselumjuju try the @MejanH's solution

[anselumjuju]

I solved this by manually adding lightningcss and sharp as explicit dependencies:

npm install lightningcss sharp

Then I triggered a Vercel build without an existing build cache.
This resolved the missing module error during font optimization (next/font + lightningcss issue).

[MejanH]

for me I got it solved by adding display: "swap", using tailwindcss. more in here: https://nextjs.org/docs/app/building-your-application/optimizing/fonts#with-tailwind-css

[KBeDevel]

After a forced redeploy (without using build cache), this worked.

[narajaon]

this is the answer

[SwanHub]

legend

[max-von-aigner]

i had the same issue where a custom google font was only loading in the local env, but not in the deployed env.
turns out that i had just forgotten to add the font to the app/layout.tsx file. once i added the const for that custom font to the layout file and redeployed the app, it worked in the deployed env.
the font was rendering correctly locally, as it was directly imported into globals.css, using tailwind v4.

[rcortiz]

I was able to fix mine by adding weights in my fonts.ts file.