`<link>` for font preload should come before the CSS

[diox]

Chrome is going to change the way it deals with <link rel=preload> - https://chromium-review.googlesource.com/c/chromium/src/+/3122306

Previously, just having a <link rel=preload> would ensure that resource would be loaded first, potentially jumping ahead of other resources not explicitly marked as needing preloading. Now it won't do that anymore, but still obey the order in which things are declared.

We have a font-display: block on the preloaded font, and that ensures there is no flash of text, but there could still be a layout shift if the font is not ready when the browser does its first layout - it might make layout computations with a fallback font anyway, causing a layout shift later when the font is available.

To avoid this, we should put the preloaded font before the CSS in the HTML, or consider doing the preload in HTTP headers in the responses.

[rik]

FYI, Chrome 95 shipped today with this change.