Prevent Font switching on load

I have observed that sometimes Kava would be refetched and the screen would display sans-serif instead. This results in extreme layout shifts because Kava is so narrow.

One solution I have been using in prior projects is to inline the font.

The render-blocking CSS would include the render-blocking font so that the fallback would only happen on IE where woff2 is unsupported, as well as on glyphs not included in the Kava font.

If we don't get http2 with parallel connections, it might be faster to inline the font into the HTML, the most extreme case (used on flupsi.com).

As a woff2 file, Kava regular is 26KB.

As an inlined base64 string, it's 34KB.

Inlined in a zipped file, it's 26KB again. Not so big at all.

An alternative would be to trace how the font is distributed and loaded. Can we make the font requirement render-blocking? Then we don't need any inlining and it'll be easier to swap out or prune the font file.