vercel / geist-font

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

Using with Tailwind CSS docs leads to Cumulative Layout Shift #53

Open barrymichaeldoyle opened 8 months ago

barrymichaeldoyle commented 8 months ago

Font Name (Geist Sans/Geist Mono):

Description of the Issue: When using the docs supplied here https://www.npmjs.com/package/geist?activeTab=readme#with-tailwind-css there is an initial flash of rendering a fallback font which causes a Cumulative Layout Shift from initially rendering the screen. It's not great for my lighthouse score :)

Reverting to https://www.npmjs.com/package/geist?activeTab=readme#app-router solves it.

Steps to Reproduce:

  1. Follow the https://www.npmjs.com/package/geist?activeTab=readme#with-tailwind-css
  2. See layout shift on load (disable cache and run on slow network to se layout shift on text)
  3. Follow https://www.npmjs.com/package/geist?activeTab=readme#app-router to see it working fine

Expected Behavior: I expect the tailwind css docs to recommend a way that works without cumulative layout shift (i.e. it should work like the app-router docs)

Environment (please complete the following information):