Ask HN: Why are web fonts double-downloading even with `crossorigin`?
(And, yes, I know the very use of web fonts is highly unpopular among many HN readers, but humor me, please.)
Here’s the deal. There are plenty of places on the web (including MDN and various Stack Overflow threads) which explain that, when using `preload` to improve website performance, you must use `crossorigin` to avoid double-downloading of preloaded web font files. As an over-simplified example from a `head` section:
<link rel="preload" as="font" href="/fonts/webfont.woff2" type="font/woff2" crossorigin />
<link rel="preload" as="style" href="/css/index.css" />
<link rel="stylesheet" href="/css/index.css" type="text/css" />
Fair enough. But what if you follow those instructions and *still* get double-downloading of the font file? That’s what I keep running into, and it doesn’t seem to matter about the hosting platform, the actual font, etc.
In addition: on the thought that it might be simply an artifact of the browser inspection process when `Disable cache` is activated (a common setting to check for problems like this), I ran it by GTmetrix as well, and the resulting waterfall showed double-downloading of the font file.
Now, after days of searching in vain for other descriptions of the same problem, I’ve come up dry; so I’m hoping one of you out there can tell me what I’m doing wrong.
Thanks in advance for any help you may be able to offer.
====
*LATER EDIT for others with similar questions who find this*: It now appears it was host-specific. Doing the procedure noted above doesn’t cause this glitch elsewhere.