fontaine icon indicating copy to clipboard operation
fontaine copied to clipboard

Fonts CLS seem to be worse?

Open Smef opened this issue 1 month ago • 0 comments

📚 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.

Smef avatar May 18 '24 03:05 Smef