unjs / fontaine

Automatic font fallback based on font metrics
MIT License
1.47k stars 23 forks source link

Fonts CLS seem to be worse? #341

Open Smef opened 1 month ago

Smef commented 1 month 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.