How to Fix "Text Remains Invisible During Web Font Load" Issue with Kendo Library in Lighthouse Report

[dineshdesigner08]

Hi Everyone,

I'm currently using the Kendo UI library, and while running a Lighthouse performance report, I'm encountering the following issue:

Ensure text remains visible during web font load Potential Savings: 1,490 ms

Affected URL: /kendo-font-icons.c6a39c1ad11c0b9d.ttf

The issue is that text remains invisible while the custom web font (Kendo's icon font) is loading, which impacts both the user experience and my Lighthouse performance score.

I understand that the font-display CSS property can address this by ensuring fallback fonts are displayed while the web font is loading. However, since this font (kendo-font-icons) is part of the Kendo library, I'm unsure how to customize it correctly to apply the font-display: swap property.

Here are my questions:

• How can I customize the Kendo UI library's font settings to include font-display: swap?
• Is there a way to optimize the loading of Kendo's fonts to reduce the 1,490 ms delay?
• Has anyone faced this issue before, and what would you recommend as the best fix?
• I'm hoping to resolve this issue so my text remains visible during font loading, and I can improve the Lighthouse score for my application.

Any guidance or suggestions would be greatly appreciated. Thanks!

Browser

Chrome