Description
Verify canary release
- I verified that the issue exists in the latest Next.js canary release
Provide environment information
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.3Which 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