Repository: next.js
Issue: [next/local/font] not applying when using Dynamic Routing
Labels: bug,Font (next/font)

### Verify canary release

- [X] I verified that the issue exists in the latest Next.js canary release

### Provide environment information

```bash
Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 22.3.0: Mon Jan 30 20:38:43 PST 2023; root:xnu-8792.81.3~2/RELEASE_ARM64_T8112
    Binaries:
      Node: 18.15.0
      npm: 9.5.0
      Yarn: 1.22.19
      pnpm: 8.6.2
    Relevant packages:
      next: 13.0.5
      eslint-config-next: 13.0.5
      react: 18.2.0
      react-dom: 18.2.0
```


### Which area(s) of Next.js are affected? (leave empty if unsure)

Font optimization (next/font)

### Link to the code that reproduces this issue or a replay of the bug

my original repository: https://github.com/2023-MUST-EAT/must-eat/tree/develop/packages/web

### To Reproduce

**❗️I attempted to reproduce the issue, but the problem did not occur. so I have provided a link to my original repository.**

**in following environment, I **get** the issue:**
- when I run my original project in Chrome (also the incognito window).

**in following environment, I **don't get** the issue:**
- In **[replay](https://www.replay.io/)** application
- In Safari
- when I rebuild the next app and reproduct it with minimal codes using the same directory and packages.

**MY CODE IN _app.tsx**
```ts
import localFont from '@next/font/local';
import type { Session } from 'next-auth';
import type { AppProps } from 'next/app';

import { HeadBar } from '../components/base/HeadBar';
import '../styles/globals.css';
import '../tailwind.css';

const gmarket = localFont({
  src: [
    {
      path: '../assets/fonts/GmarketSansLight.woff',
      weight: '400',
    },
    {
      path: '../assets/fonts/GmarketSansMedium.woff',
      weight: '600',
    },
    {
      path: '../assets/fonts/GmarketSansBold.woff',
      weight: '700',
    },
  ],

  variable: '--gmarket',
});

function MyApp({
  Component,
  pageProps: { session, ...pageProps },
}: AppProps<{ session: Session }>) {
  return (
    <>
      <main className={`${gmarket.className}`}>
        <HeadBar />
        <Component {...pageProps} />
      </main>
    </>
  );
}

export default MyApp;
```

**PREVIEW**

When I click on the card to navigate to the detail page, which uses dynamic routing, the fonts change to the default font.

![next/font not applying](https://github.com/vercel/next.js/assets/97023321/0feff2aa-de29-4e1d-9d7c-10b312141f79)


### Describe the Bug

I am currently using `next/local/font` in conjunction with Next.js version 12 and tailwindCSS to apply a local font across all pages, including those with dynamic routes. However, I am facing an issue where the local fonts do not apply on the initial visit to a page with dynamic routing. More specifically, the issue occurs only on the first click, but subsequent visits to other pages with dynamic routes do not exhibit the FOUT problem.
This issue only occures in the Chrome browser.

I have attempted to address the issue by using the canary version, which I believe has font-display: 'swap' set as the default behavior. However, the FOUT issue persists even with the canary version.

I initially adopted next/font to mitigate the FOUT problem, as it is my understanding that using next/font allows for font downloading during the build time.

### Expected Behavior

I want my local fonts to be applied without the **Flash of Unstyled Text** issue in every pages, including pages with the dynamic routes.

**PREVIEW**

(in Safari)

![next/font applied correctly](https://github.com/vercel/next.js/assets/97023321/f9e1ba7e-fe9e-4988-aa42-631ebd7393ab)


### Which browser are you using? (if relevant)

Chrome 113.0.5672.126

### How are you deploying your application? (if relevant)

have not deployed yet