Repository: next.js
Issue: Loaded optimized font jumps on page reload
Labels: 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: win32
      Arch: x64
      Version: Windows 10 Pro
    Binaries:
      Node: 18.16.0
      npm: 9.6.1
      Yarn: 1.22.19
      pnpm: N/A
    Relevant packages:
      next: 13.4.4
      eslint-config-next: 13.4.4
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.3
```


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

App directory (appDir: true), Font optimization (next/font)

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

https://gitflic.ru/project/gabberex/portfolio-gabberex/file

### To Reproduce

Install all dependencies, run the project in development mode. Refresh the page in the chromium browser. The check mark next to "Disable cache" is enabled.

### Describe the Bug

**layout.tsx**

```
import { FC, ReactElement } from 'react'

import { Metadata } from 'next'
import localFont from 'next/font/local'

import { mainTitle } from '@constants/staticData.consts'

import Footer from '@components/layouts/Footer'
import Header from '@components/layouts/Header'

import { IPropsWithChildren } from '@interfaces/common.types'

import '@styles/main.css'

export const metadata: Metadata = {
  title: mainTitle,
  description: 'Временное описание',
  icons: '/favicon.svg'
}

const moula = localFont({
  src: [
    {
      path: '../../public/assets/fonts/moula-regular.woff',
      weight: '400',
      style: 'normal'
    },
    {
      path: '../../public/assets/fonts/moula-regular.woff',
      weight: '400',
      style: 'normal'
    },
    {
      path: '../../public/assets/fonts/moula-semibold.woff2',
      weight: '600',
      style: 'normal'
    },
    {
      path: '../../public/assets/fonts/moula-semibold.woff',
      weight: '600',
      style: 'normal'
    },
    {
      path: '../../public/assets/fonts/moula-bold.woff',
      weight: '700',
      style: 'normal'
    },
    {
      path: '../../public/assets/fonts/moula-bold.woff',
      weight: '700',
      style: 'normal'
    }
  ],
  variable: '--font-moula'
})

const RootLayout: FC<IPropsWithChildren> = ({
  children
}): ReactElement => (
  <html lang='ru' className={ `${moula.variable}` }>
    <body className='font-moula text-large text-white bg-blue-960'>
      <Header />
      <main>{ children }</main>
      <Footer />
    </body>
  </html>
)

export default RootLayout
```

**tailwind.config.js**

```
// ... //
fontFamily: {
  moula: [ 'var(--font-moula)', ...fontFamily.sans ]
},
// ... //
```

---

Local font is loaded, path in public directory. 
Development mode. 
Disable cache in browser/network flag is set opposite.
As a result, when the page is reloaded, the font jumps. That is, it is loaded again and it is noticeable. Optimization crashed.
Rolled back to next 13.1.6, install @next/font 13.1.6 experimental: { appDir: true } - fonts are loaded without a jump.

### Expected Behavior

Page reload, the font is loaded and does not jump

### Which browser are you using? (if relevant)

Vivaldi 6.0.2979.25, Yandex Browser 23.5.1.71

### How are you deploying your application? (if relevant)

npm run dev