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?

6 Answers 6

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"/>
3
  • 2
    It did not work for me, am I supposed to put the style somewhere in the app folder?
    – devssh
    Nov 1, 2018 at 8:48
  • 2
    I tried adding crossorigin="anonymous" and crossorigin to my <link> preload and it still shows the warning. Jan 5, 2019 at 20:14
  • Are you using that font? Jan 5, 2019 at 21:17
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"/>

1
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.

1
  • Hi, does this preload work when there is query string at the end ?v=4.3.0 for versioning? Jun 1, 2021 at 11:26
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>
3
  • 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, 2019 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. Nov 20, 2019 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. Feb 1, 2021 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">
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

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.