search

vercel / geist-font

https://vercel.com/font
SIL Open Font License 1.1
2.13k stars 54 forks source link

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

Closed nabilfatih closed 6 days ago

nabilfatih commented 8 months ago

Font Name (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):

JohnPhamous commented 8 months ago

Can you provide repro code?

VictorMustin commented 3 months ago

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}>

JohnPhamous commented 6 days ago

Closing as there's no repro.

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