Performancetest: Ensure text remains visible during webfont


Topic: Performancetest: Ensure text remains visible during webfont load

Grf asked 6 years ago

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!


Jakub Mandra staff premium answered 6 years ago

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


Grf answered 6 years ago

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 premium commented 6 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/


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • 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