How to Fix "Text Remains Invisible During Web Font Load" Issue with Kendo Library in Lighthouse Report #391
Description
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