Preload font-awesome

font-awesome preload
DD. picture DD. · Mar 14, 2018 · Viewed 30.1k times · Source

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?

Answer

Barry Pollard picture Barry Pollard · Mar 21, 2018

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 questions

Font Awesome not working, icons showing as squares

So I'm trying to prototype a marketing page and I'm using Bootstrap and the new Font Awesome file. The problem is that when I try to use an icon, all that gets rendered on the page is a big square. …

Read More
Add image in title bar

How do I add image in title bar? I have title- "Webnet" Merging it with a FontAwesome Glyphicon's icon images as- <title><i class="icon-user icon-black"></i>Webnet</title> And I tried …

Read More
Use Font Awesome Icons in CSS

I have some CSS that looks like this: #content h2 { background: url(../images/tContent.jpg) no-repeat 0 6px; } I would like to replace the image with an icon from Font Awesome. I do not see anyway to use the icon in …

Read More