Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fonts CLS seem to be worse? #341

Open
Smef opened this issue May 18, 2024 · 1 comment
Open

Fonts CLS seem to be worse? #341

Smef opened this issue May 18, 2024 · 1 comment

Comments

@Smef
Copy link

Smef commented May 18, 2024

📚 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 Smef changed the title Fonts seem to be worse? Fonts CLS seem to be worse? May 18, 2024
@danielroe
Copy link
Member

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants