Three warnings for Font Awesome (in Chrome), namely "integrity mismatch", "appropriate `as` value" and " request credentials don't match"

Question

As the title states, I am getting the following three warnings in Chrome (latest version):

1) A preload for 'https://use.fontawesome.com/releases/v5.8.2/css/all.css' is found, but is not used due to an integrity mismatch

2) The resource https://use.fontawesome.com/releases/v5.8.2/css/all.css 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

3) A preload for 'https://use.fontawesome.com/releases/v5.8.2/css/all.css' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.

While I understand that these are not errors, do they represent a bigger issue or can it be safely ignored? I recently switched to https but to be honest, it might have been showing this in the chrome inspect window before this (I only saw it because I was checking the SSL post installation.

I have Googled parts of these warnings but havn't found anything. I used the "pasted into your head" method of adding Font Awesome, like this:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">

Would appreciate a little feedback, thanks in advance!

Answer 1

This is due to your use of crossorigin="anonymous", and you can safely ignore these warnings, but they will be visible to your users, so it is best to correct the problems.

To do so, you'll want to ensure that your font is preloaded with the rel preload (with rel="preload"), and an as attribute declaring it as a font (with as="font").

This would look like:

<link rel="preload" as="font" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">