Ask HN: Why are web fonts double-downloading even with `crossorigin`?
Calling all web developers...<p>(And, yes, I know the very use of web fonts is highly unpopular among many HN readers, but humor me, please.)<p>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:<p>&lt;link rel=&quot;preload&quot; as=&quot;font&quot; href=&quot;&#x2F;fonts&#x2F;webfont.woff2&quot; type=&quot;font&#x2F;woff2&quot; crossorigin &#x2F;&gt;<p>&lt;link rel=&quot;preload&quot; as=&quot;style&quot; href=&quot;&#x2F;css&#x2F;index.css&quot; &#x2F;&gt;<p>&lt;link rel=&quot;stylesheet&quot; href=&quot;&#x2F;css&#x2F;index.css&quot; type=&quot;text&#x2F;css&quot; &#x2F;&gt;<p>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.<p>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.<p>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.<p>Thanks in advance for any help you may be able to offer.<p>====<p>*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.