Fonts CLS seem to be worse?

Smef commented 6 months ago

📚 What are you trying to do?

I was loading this through nuxt-fontaine, and then through nuxt-fonts and it seems like CLS is actually worse using this package. We're using Plus Jakarta Sans from Bunny Fonts. The fallback font is loading, but the sizing seems to be off and it's actually causing more CLS than not using this.

When this package is not used, it falls back to Helvetica, which is fairly close and has a similar number of lines in most places. When this is in use, even if Helvetica is set as the fallback font (instead of Arial, which it defaults to) the sizing is just generally worse everywhere.

🔍 What have you tried?

I've manually set the fallback font to be Helvetica. I've also tried using both nuxt-fontaine and nuxt-fonts to make sure I wasn't configuring things in an odd way.

I also tried Roboto, which is used in some of the examples. I saw similar CLS issues, though not as severe.

ℹ️ Additional context

Is this particular font just hard to size or something? Generally, nuxt-fonts worked pretty well, but the sizing of the fallback font was definitely a problem.

danielroe commented 4 months ago

I think this will be resolved when updating to the latest version of capsizecss/metrics.

nandorojo commented 2 months ago

I think this is the case in the playground as well: https://stackblitz.com/github/unjs/fontaine/tree/main/playground?file=package.json

https://github.com/user-attachments/assets/44198621-ac4b-4110-8499-2ba1bea1d7b3

unjs / fontaine