Google Fonts/Next.js Bug

[thomasmartin]

Issue Description

When using Google Fonts with Next.js, the fonts sometimes fail to apply correctly to the specified elements. This issue persists across multiple projects and setups.

Environment

• Next.js version: [14.2.5]
• React version: [^18]
• Node.js version: [v20.9.0]
• Operating System: [macOS Sonoma 14.5]

Steps to Reproduce

1. Set up a new Next.js project (App router, TS and/or JS)
2. Import and configure a Google Font using next/font/google
3. Apply the font to elements in the CSS using the provided variable
4. Run the development server
5. Observe that the font is not applied correctly to the specified elements

Expected Behavior

The Google Font should be applied to the elements as specified in the CSS.

Actual Behavior

The default font is used instead of the specified Google Font.

Workaround

Clearing the .next folder and rebuilding the project temporarily resolves the issue, but it sometimes reoccurs in subsequent development sessions.

Additional Notes

• No error messages are displayed in the console
• This issue has been observed across multiple projects and setups
• The problem seems more prevalent during development, but occasionally affects production builds as well

Question

Is this a known issue with Next.js and Google Fonts integration? Are there any recommended long-term solutions or best practices to prevent this from happening?

Any insights or suggestions would be greatly appreciated.

[pawlean (Pauline P. Narvas)]

Hi, @thomasmartin! Great to see you here from Twitter. Would love to help!

I actually use Google Fonts and Next.js for multiple projects and have been unable to replicate. It sounds like it may be a configuration error.

Sharing some relevant documentation in case it’s helpful.

Components: Font | Next.js

Could you get a minimal reproducible example for us to investigate further?

[thomasmartin]

Hi, @pawlean! Great to be here, truly grateful for your help! And thank you for the reference; I’ll review it and check my configuration. That likely is the issue, especially since I’m having trouble reproducing the bug in a stripped-down environment myself. I’ll link to the MRE as soon as possible.