Preload font-awesome

font-awesomepreload

I am trying to pre-load font-awesome to improve my page load times:

<link rel="preload" as="style" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>
<link rel="preload" as="font" type="font/woff2" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0"/>

However…Chrome seems to download the font twice and reports

The resource
http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0
was preloaded using link preload but not used within a few seconds
from the window's load event. Please make sure it wasn't preloaded for
nothing.

enter image description here
How do I get this to work?

Best Answer

You must add the crossorigin attribute when preloading fonts.

    <link rel="preload" as="style" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>
    <link rel="preload" as="font" type="font/woff2" crossorigin href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0"/>
Related Topic