Topic: Performancetest: Ensure text remains visible during webfont load
Hi,
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!
Hi,
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?
Best
Jakub Mandra staff commented 5 years ago
Page has to load from the server, so even if you have the static font files on your page's directory, the browser has to download it all. Fonts are downloaded after the HTML content. Even if you run your test locally, the network behavior should be simulated.
I think it should be possible to override our css (in custom-styles.scss file) rules with solutions presented here: https://css-tricks.com/font-display-masses/
Hi,
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.
Best,
Jakub
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: 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