How can I check if font awesome is blocked from a client's browser?

Question

First of all, there is a very similar question here:
How to check if Font Awesome is loaded in web page with javascript?

I will try to explain why my question is different.

I have discovered that browsers have started to block web fonts in general, and this calls for fallback solutions. With normal character-range fonts, this is easy:

CSS:

font-family: Lato, "Lucida Grande", Tahoma, Sans-Serif;

Font awesome however is harder, as it uses characters outside the normal range of fonts, and cannot have a simple one line css solution.

There are several options available, including using images, or in some cases characters from other fonts, similar to an icon, but all approaches needs a way to check if font awesome is actually working or not, in the individual client's browser.

The answer from the linked question says that you can check if font awesome is loaded, by using this code:

function css(element, property) {
  return window.getComputedStyle(element, null).getPropertyValue(property);
}

window.onload = function () {
  var span = document.createElement('span');

  span.className = 'fa';
  span.style.display = 'none';
  document.body.insertBefore(span, document.body.firstChild);

  if ((css(span, 'font-family')) !== 'FontAwesome') {
    // add a local fallback
  }
  document.body.removeChild(span);
};

However, my local fallback is never executed, as the css(span, 'font-family') does in fact return FontAwesome. I believe this is because the css file is imported without problems, and the css says the font family should be FontAwesome. The fact still remains that FontAwesome is not working. In other words, the accepted answer checks simply that font awesome css exist, and not if the web font itself is blocked due to security concerns.

The OP of the other question clarifies in comments why they asked the question:

I'm doing it because I'm writing a snippet of js that is going to be loaded in many different pages that I'm not sure are all gonna have font-awesome, if they don't I'm going to load it.

My problem is browsers blocking web fonts, and I hope the title is clear enough to be considered a separat and different question. The problem exists in the combined setup of Windows 10 and IE11. I have exhausted my options to simply turn off the security settings blocking the font.

Duplicate question explanation:

The question is not at all a duplicate of the suggested question. This is not about if the resource is loaded or not. The loading of the resources works just fine. The hosts are not blocked. The rendering and display of the webapps is the problem, which is also explained in the original question, but mentioned again now, as someone suggested to close as a duplicate.

EDIT, FURTHER READING:

My efforts to turn off the settings blocking the web fonts are explained here

Answer 1

The solution you're using will not work because window.getComputedStyle will not tell you about the rendered font but the font defined in the stylesheet, loaded or otherwise (ref). You could use heuristics:

window.onload = function() {
  var fas = document.createElement("span");
  fas.className = "fas fa-ambulance";
  fas.style.position = "absolute";
  fas.style.left = 0;
  fas.style.top = 0;
  fas.style.visibility = "hidden";
  document.body.appendChild(fas);
  window.setTimeout(function() {
    var widthBefore = fas.offsetWidth;
    fas.style.fontFamily = "asdf";
    var widthAfter = fas.offsetWidth;
    if (widthBefore === widthAfter) {
      console.log("Font Awesome Blocked");
    } else {
      console.log("Font Awesome Loaded");
    }
    document.body.removeChild(fas);
  }, 2000);
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">

The above creates an element that uses Font Awesome and compares its width with an element that is forced to use a fallback font. The width comparison will tell you if the browser used a fallback font for Font Awesome as well.

Answer 2

On your page you can use the onload and onerror event

Example

<link rel="stylesheet" 
      href="https://use.fontawesome.com/releases/v5.7.1/css/all.css"
      onload="alert('everythings looks fine')" 
      onerror="alert('error while loading fontawesome');">

Inside the event you can set a global variable.

UPDATED

If you want to know if the font works, you can check, if the font is used:

<html>
  <head>
    <link rel="stylesheet"
          href="https://use.fontawesome.com/releases/v5.7.1/css/all.css"/>
    <script>
      function check(){
        console.log(window.getComputedStyle(document.getElementById('foo')).getPropertyValue("font-family"));
      }
    </script>
  </head>
  <body onload="check();"/>
     <span id="foo" class="fa"></span>
  </body>
</html>

In this example you see 'Font Awesome 5 Free' in the console if Font Awesone works