next/font/google returns no-source in local server

[jscastanos]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: linux
      Arch: x64
      Version: #1635-Microsoft Fri Jan 01 08:00:00 PST 2016
    Binaries:
      Node: 18.12.1
      npm: 8.19.2
      Yarn: 3.2.4
      pnpm: N/A
    Relevant packages:
      next: 13.3.4
      eslint-config-next: 13.4.3
      react: 18.2.0
      react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

No response

Link to the code that reproduces this issue or a replay of the bug

N/A

To Reproduce

Import Overpass font using next/font/google

const overpass = Overpass({
  subsets: ['latin'],
  variable: '--font-overpass',
  display: 'swap',
});

and use the font

  <main className={overpass .className}>
     <Component {...pageProps} />
   </main>

 fontFamily: {
        sans: [ 'var(--font-overpass)']

Describe the Bug

Font in local dev doesnt look correct

Local Dev

Prod

and when you inspect element the local dev returns no source for font style
Local Dev

Prod

Expected Behavior

Font should be the same for both local and prod

Which browser are you using? (if relevant)

Brave v1.52.126

How are you deploying your application? (if relevant)

nx run app:build

[jscastanos]

closing this ticket as this is related to #45080

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.