Katex: Use font-display: swap to prevent invisible text on load

[yawnoc]

Google PageSpeed Insights suggests that I should "ensure text remains visible during webfont load".

For KaTeX this would simply involve including font-display: swap; in all of the @font-face entries in katex.css.

I think this a good idea, but how would we then cater for people who don't want to temporarily show a fallback font?

[edemaine]

I've always wondered why my math appears blank on initial page load. 😄 I'm honestly not sure which behavior would feel best (I should experiment), but swap behavior is probably less surprising. I believe you can customize this now with the following CSS:

.katex { font-display: swap; }

If we added a rule to base KaTeX, it could still be overridden via

.katex { font-display: block !important; }

Either way, this should probably be documented. The question is whether to change the default... Other votes would be welcome!

[mbourne]

Google's page speed suggestion, in general, is to use swap, but this is not the default for all browsers: https://developers.google.com/web/updates/2016/02/font-display

Personally, I hate text jumping around as fonts are loading, but I'm not a big fan of the flash of "wrong" font with swap, either.

It may be best to work towards an option where if the font is already in cache, then use block; if not, use swap.

I conducted some experiments where I did lazy-load for math processing, making sure the above-the-fold content had most-used fonts ready to roll (using preload) and then loaded other fonts as the user scrolled down the page. Probably too fiddly for default KaTeX behavior, but something the browsers should do for us, I feel.

[yawnoc]

I believe you can customize this now with the following CSS:

.katex { font-display: swap; }

Hmm, that doesn't validate:

1 | .katex | Property font-display doesn't exist : swap

I think font-display is only allowed when the font is loaded in the @font-face at-rule... so we'd need to provide 2 different versions of katex.css to offer the choice.