geist-font icon indicating copy to clipboard operation
geist-font copied to clipboard
verified publisher icon vercel

(Glitch) Strage font resize in Nextjs when using router.refresh()

Open nabilfatih opened this issue 2 years ago • 2 comments

Font Name (Geist Sans/Geist Mono):

  • [✅] Geist Sans
  • [✅] Geist Mono

Description of the Issue: When router.refresh() is used, there is a strange resize on font, kind of like a glitch.. but at the end, it goes to normal size.

Steps to Reproduce:

  1. add geist font using tailwind in Nextjs
  2. use router.refresh()

Expected Behavior: No glitch

Screenshots: https://github.com/vercel/geist-font/assets/77352432/ea85bec2-f76d-4120-9ae0-c2f1feb7110d

Environment (please complete the following information):

  • OS: MacOS
  • Framework: Nextjs14
  • Version of the Font: 1.0.0

nabilfatih avatar Oct 28 '23 11:10 nabilfatih

Can you provide repro code?

JohnPhamous avatar Oct 30 '23 17:10 JohnPhamous

I have the same issue, can't find a fix for now. It happens on every data revalidation or router.refresh() (basically when the router cache refreshes). It looks like the font is inter for a split second before switching to geist, the font is just reloading on every router cache refresh is my guess. I import Geist in the root layout like this import { GeistSans } from 'geist/font' and apply it like that <html lang="en" data-theme="FFFFFF" className={GeistSans.className}>

VictorMustin avatar Apr 02 '24 22:04 VictorMustin

Closing as there's no repro.

The suspect is that you have DevTools open with the "Disabled Cache" option enabled.

JohnPhamous avatar Jul 01 '24 20:07 JohnPhamous