Adding custom font affects performance (LCP) a lot

[Baroshem]

Hey there!

I am amazed by the DX of this module and how easy it is to add a new web font to your Nuxt project. I want to make my application as performant as possible and the problem is when I add a web font (instead of using default machine font) the performance of the app (and more specifically Largest Contentful Paint) drops a lot :(

I have added following code to my app:

<style lang="css" scoped>
#main {
  font-family: "Inter", sans-serif;
}
</style>

With Inter web font

Without Inter web font

I looked at the https://web.dev/articles/font-best-practices and it seems that Nuxt Fonts implements all of it by default.

Is there anything that I am missing or is it how web fonts affect performance in general?

I will be grateful for any response or feedback :)

[danielroe]

can you provide a minimal reproduction? 🙏

[Baroshem]

@danielroe

https://github.com/nuxt/commerce

And specifically -> https://github.com/nuxt/commerce/blob/8695fbc34c6e4ee5ac8d5ca59c39c8e04a8ed9c8/app/app.vue#L32

[danielroe]

in that case I don't believe the issue is the font - it's just capturing the slow load via LCP. This is the current lighthouse score without custom font:

[Baroshem]

This is the old version of the page that does not come with many perf improvements. I cannot deploy a new version where you could see it due to following issue:

Here are the most up to date reports (they are with the font commented out):

1. https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1731423186516-95911.report.html
2. https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1731423185413-73757.report.html
3. https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1731423185924-3418.report.html

[Baroshem]

Just to give you more context. In the CI script there is a job for doing Lighthouse test.

1. After commenting out the font https://github.com/nuxt/commerce/commit/2b78b2149487371e8abbbd2efeac66548c0737b9
2. Before commenting the font https://github.com/nuxt/commerce/commit/4b4928883950298fdd1768059cebb3abffe50647

The second link will have much worse score for all pages. The first one where the only change is commenting/removing font. With font added it seems to increase the Render Delay and increase overall Largest Contentful Paint time even though font-display and font face are used. under the hood.