22

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?

bhansa
  • 7,282
  • 3
  • 30
  • 55
DD.
  • 21,498
  • 52
  • 157
  • 246

6 Answers6

14

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"/>
Barry Pollard
  • 40,655
  • 7
  • 76
  • 92
4

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"/>
Erick Petrucelli
  • 14,386
  • 8
  • 64
  • 84
user10726299
  • 57
  • 1
  • 2
  • 4
    What does that do? How does it answer the question? Don't just blurt out code. Explain yourself! https://stackoverflow.com/help/how-to-answer – Rob Nov 30 '18 at 11:43
4

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.

bhansa
  • 7,282
  • 3
  • 30
  • 55
0

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>
lfurini
  • 3,729
  • 4
  • 30
  • 48
Hans Ganteng
  • 179
  • 1
  • 4
  • 1
    While a code-only answer is indeed an answer, a bit of explanation (why the OP's code did not work, what is the general idea behind your code, important points, warnings, ...) could make it a *better* answer. – lfurini Jan 16 '19 at 17:34
  • 2
    There's multiple slashes in the Max CDN URL. Also, `swap` is not a recommended value when used with icon fonts, as there's no fallback in this case. – Marcio Duarte Nov 20 '19 at 19:01
  • I am using multiple versions of Font Awesome (regular, bold, light) and that's why I also use `swap`. If one regular won't load, light will act as a fallback. – Mario Nezmah Feb 01 '21 at 12:35
0

The proper way to use preload is something like the following:

  1. Preload the asset/font needed
  2. 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">
Dale Ryan
  • 473
  • 4
  • 9
0

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

MistaPrime
  • 1,591
  • 1
  • 10
  • 20