Web Font Downloaded Twice When Preloading

Google’s Page Speed Insights tool (also incorporated into Catchpoint’s tests) suggested that I preload the web font I was using on my Les Misérables commentary. The browser will know about the font and can start downloading it as soon as it’s parsed the page instead of waiting until it’s requested, retrieved and parsed the style sheet too.

OK, easy enough, once I looked up the parameters I needed for the <link rel="preload"> tag. Or so I thought.

<link rel="preload" href="/path/to/myfont.woff" as="font" type="font/woff" />

But when I checked the network tabs in the Firefox and Chromium developer tools, they were downloading the font twice: once after it downloaded the HTML file, and again after it downloaded the CSS.

After banging my head against the wall trying to figure out what I was doing wrong, I went back and looked at the article I’d gotten the as="font" and type="font/woff" (or type="font/woff2" depending on the font you’re using), and noticed it also included crossorigin. Their example was pulling the font from a third party site, and I was serving it locally, so I’d left that parameter out.

Weirdly enough, it turns out you need to add the crossorigin property to the link, even when it’s on the same site. It doesn’t make sense to me either, but it works.

So the tag should be

<link rel="preload" href="/path/to/myfont.woff" as="font" type="font/woff" crossorigin />