Loaded optimized font jumps on page reload

GabbereX commented 1 year ago

Verify canary release

[X] 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.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

pyrexfm commented 1 year ago

Same with Google fonts. Tried playing around with the options (preload: true, display: swap) and still happens

koraykoska commented 1 year ago

display: "block" fixes this. Swap is meant to behave like you mentioned. I don't know why it is used in all examples as it's stupid and worst ever UX but whatever you prefer.

Basically:

No display setting tells the browser only to apply new fonts once they are cached, hence on the second visit/render of the website
Swap tells the browser to replace the default font with the said one once it was loaded (jumping around)
Block tells the browser only to render the text once the font is available.

I didn't try other settings of display.

resthedev commented 10 months ago

Swap tells the browser to replace the default font with the said one once it was loaded (jumping around)

Thanks for this. This was driving me crazy. Out of curiosity, do you also use this setting in production?

vercel / next.js