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!

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.

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.

You need to specify it in the fonts CSS like

@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lato/v17/S6u-w4BMUTPHjxsIPx-mPCLQ7A.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

It is better to show things in Times New Roman font, which is the default fallback font than to make users wait for the font to load and display nothing.

Seconding this! Made a PR for changing the default behavior. It'd be nice to have an option similar to how google fonts lets you specify the display behavior as part of the cdn url parameter, with ?display=swap, but, I'm not sure how to set that up or if jsdelivr even supports it