Google Fonts/Next.js Bug

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

Set up a new Next.js project (App router, TS and/or JS)
Import and configure a Google Font using next/font/google
Apply the font to elements in the CSS using the provided variable
Run the development server
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.

Hi, ! 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.

https://nextjs.org/docs/pages/api-reference/components/font

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

Hi, ! 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.