<link rel=preload> fonts

[dfabulich]

https://iplayif.com/?story=https%3A%2F%2Fifarchive.org%2Fif-archive%2Fgames%2Fzcode%2FLostPig.z8 uses a CSS file, web.css, which refers to various @font-face rules.

@font-face {
    font-family: Iosevka;
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/iosevka/iosevka-extended.woff2) format("woff2")
}

The HTML should include a <link rel=preload> element for every font, like this:

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preload

  <link
    rel="preload"
    href="dist/fonts/iosevka/iosevka-extended.woff2"
    as="font"
    type="font/woff2"
    crossorigin />

That way, the browser can begin downloading the web fonts as soon as the HTML finishes downloading, rather downloading the CSS, and only then initiating font download.

[dfabulich]

See also #177. The fonts should use versioned URLs.

[curiousdannii]

There are up to 12 font files, but only half are used depending on whether it's mobile or not. Also most games won't need all weight/italics combinations. So I'm not sure if this would help much. Maybe just for the base font? But even it has a different mobile version...

[curiousdannii]

An alternative to preloading the fonts this way would be to just add some HTML that would use the fonts. It could then at least do it in parallel with the other downloaded files.

[dfabulich]

We'd need to do something like preloading. Just using the fonts means the fonts won't be downloaded until the CSS is downloaded, but with preloading, the fonts can start downloading as soon as the HTML downloads.

[curiousdannii]

It would be ideal if there was a variable font with narrow widths, so that multiple files wouldn't need to be downloaded. There weren't any when I settled on Iosevka a few years ago, but maybe there is now.