Topic: Performancetest: Ensure text remains visible during webfont load
While running Lighthouse performance test, I get a notification:
Ensure text remains visible during webfont load
The message refers to this font: fonts.gstatic.com however, I can't find any link in the MDBootstrap files that refers to this link s:
Leverage the font-display CSS feature to ensure text is visible while webfonts are loading.
Whilst reading some articles about, these articles suggest to load some intersection api to detect if 'font-face' can be used.
Does MDBootstrap provide a functionality to cover this performance notification, so the text stays remains visible during webfont load?
Thanks for your explanation. I do understand development rules sometimes are not in line with f.i. performance requirements.
One thing that puzzles me however, I do use the Roboto font and even than I get this warning. Is this something you can explain?
When a browser requests a font asset from a web server, any elements with styles invoking that font is hidden until the font asset has downloaded. This is known as the "Flash of Invisible Text," or FOIT. This behavior is there to "save" us from seeing text initially render in a system font, only to swap to the custom typeface once it has loaded.
Material Design rules force us to use Roboto font, so we do not want flashes in any other fonts. That is why we do not provide any functionality to cover the invisible text whilst font loads.
But we will discuss the solution for the performance warnings within our team.
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
- User: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.7.0
- Device: Mac Book Pro
- Browser: Firefox Developer
- OS: OSX
- Provided sample code: No
- Provided link: Yes