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

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!

Continue reading...