Preload font-awesome - font-awesome

Question

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.
How do I get this to work?

Answer 1

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"/>

Answer 2

Along with marking a link as a preload stylesheet with rel="preload" (what you already did), we also need to use JavaScript to toggle the rel attribute to stylesheet when the file loads:
<link rel="preload" as="style" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" onload="this.rel='stylesheet'"/>
<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"/>

Answer 3

It can be loading it twice because of the order you are doing preload.
<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"/>
<link rel="preload" as="style" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" onload="this.rel='stylesheet'"/>
Preload the font first so that, css #font-face does not send a request again to load it.

Answer 4

Try using this method:
<style>
#font-face {
font-family: 'FontAwesome-swap';
font-display: swap;
src: local('FontAwesome'), url(https:////maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0) format('woff2');
}
</style>

Answer 5

The proper way to use preload is something like the following:
Preload the asset/font needed
Then use it somewhere in the page, does not matter if you use it inside javascript, css or html.
If you did not use the preloaded asset/font, chrome will warn you that preloaded font was not used within a certain timeframe:
The resource https://link-to-your-font-or-asset was
preloaded using link preload but not used within a few seconds from the
window's load event. Please make sure it has an appropriate `as` value and
it is preloaded intentionally.
If you need the font as soon as possible you can do something like:
<link rel="preload font" as="font" type="font/woff2" crossorigin="anonymous" href="fonts/vendor/#fortawesome/fontawesome-free/webfa-regular-400.woff2?68c5af1f48e2bfca1e57ae1c556a5c72">
Notice the rel="preload font", browser will detect preloading but since we specify font as second value (separated by space of course) it will use the preloaded asset/font immediately. If you are preloading stylesheet then put stylesheet as second value.
If we combine this approach with loading fontawesome stylesheet, font will not be downloaded twice since we utilized preload. The following code block will only load fontawesome font woff2 files once each.
<link rel="preload font" as="font" type="font/woff2" crossorigin="anonymous" href="fonts/vendor/#fortawesome/fontawesome-free/webfa-regular-400.woff2?68c5af1f48e2bfca1e57ae1c556a5c72">
<link rel="preload font" as="font" type="font/woff2" crossorigin="anonymous" href="fonts/vendor/#fortawesome/fontawesome-free/webfa-solid-900.woff2?ada6e6df937f7e5e8b790dfea07109b7">
<link rel="preload font" as="font" type="font/woff2" crossorigin="anonymous" href="fonts/vendor/#fortawesome/fontawesome-free/webfa-brands-400.woff2?c1210e5ebe4344da508396540be7f52c">
<link rel="stylesheet" href="css/fontawesome-fonts.css">

Answer 6

I couldn't figure it out until I realized my pagespeed from LightHouse was giving error due to a LightHouse bug, not related to the speed of the page.
LightHouse wants the 'font-display' property to be set as 'swap'.
The new version of FontAwesome fixes this issue as described here: https://github.com/FortAwesome/Font-Awesome/issues/16077
So all I had to do was load the version v5.15.0 instead of v5.10.0