I am preloading a font using the <link> HTML tag with the rel attribute set to preload as captured in the snippet below;
<link rel="preload" href="fonts/32ADEO.woff2" as="font" type="font/woff2">
While this works as expected by loading the typeface, it gets loaded again.
The screenshot of the network tab in Google Chrome browser shows the typeface loading twice - see below;
Also, I get the following warning in the Google Chrome browser console tab;
The resource https://example.com/new-v8/fonts/32A0E0.woff2 was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it Please make sure it has an appropriate 'as' value and it is preloaded intentionally.
What am I doing wrong and how can I fix it?
Your preload-Tag takes the argument "crossorigin", which must be given for Webfonts, even if they are on the same host as your website.
See https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content#Cross-origin_fetches or https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/#early-loading-of-fonts .
来源：https://stackoverflow.com/questions/49674092/preloading-font-with-rel-preload