Skip to content

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Loaded optimized font jumps on page reload #50938

Closed
1 task done
GabbereX opened this issue Jun 7, 2023 · 3 comments
Closed
1 task done

Loaded optimized font jumps on page reload #50938

GabbereX opened this issue Jun 7, 2023 · 3 comments
Labels
Font (next/font) Related to Next.js Font Optimization.

Comments

@GabbereX
Copy link

GabbereX commented Jun 7, 2023

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.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
@GabbereX GabbereX added the bug Issue was opened via the bug report template. label Jun 7, 2023
@github-actions github-actions bot added area: app Font (next/font) Related to Next.js Font Optimization. labels Jun 7, 2023
@pyrexfm
Copy link

pyrexfm commented Jun 13, 2023

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

@koraykoska
Copy link

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
Copy link

  • 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?

@samcx samcx removed bug Issue was opened via the bug report template. area: app labels Jan 23, 2025
@vercel vercel locked and limited conversation to collaborators Mar 22, 2025
@samcx samcx converted this issue into discussion #77398 Mar 22, 2025

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

Assignees
No one assigned
Labels
Font (next/font) Related to Next.js Font Optimization.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@koraykoska @samcx @pyrexfm @GabbereX @resthedev