CODEWITHSUNDEEP
javascriptjquery
Sol
Sol

Reputation: 1029

How to use javascript to get a fallback to local server for fontawesome if CDN fails?

I am trying to have fallbacks for all of the bootstrap 4 code. The only one I haven't figured out yet is for fontawesome with javascript.

I found some code, but it was old and doesn't work for fontawesome. I wasn't sure which elements fontawesome uses to check for to do a fallback local copy?

<head>
  <!-- Bootstrap CSS CDN -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
  <!-- APP CONTENT -->


     <!-- jQuery UI CDN --><script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
   <!-- jQuery UI local fallback --><script type="text/javascript">(window.jQuery.ui === undefined) && document.write( '<script src="./js/jqueryui/jquery-ui.min.js"><\/script>')</script>



<!-- jQuery CDN --><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- jQuery local fallback --><script>window.jQuery || document.write('<script src="js/3.3.1/jquery-3.3.1.min.js"><\/script>')</script>
<!-- popper CDN --><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" ></script>
<!-- popper local fallback --><script>if(typeof(Popper) === 'undefined') {document.write('<script src="js/bootstrap4/1.14.7/popper.min.js"><\/script>')}</script>
<!-- Bootstrap JS CDN --><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- Bootstrap JS local fallback --><script>if(typeof($.fn.modal) === 'undefined') {document.write('<script src="js/bootstrap4/bootstrap.min.js"><\/script>')}</script>
<!-- Bootstrap CSS local fallback --><div id="bootstrapCssTest" class="hidden"></div>
  <script>
    $(function() {
      if ($('#bootstrapCssTest').is(':visible')) {
        $("head").prepend('<link rel="stylesheet" href="css/bootstrap4/bootstrap.min.css">');//add local version if cdn down
      }
    });

/////////////// This doesn't work if I try to load fontawesome/////////////////
   if (typeof bootstrapcdn == "undefined") {
        document.write(decodeURI('%3Clink type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.1.1/css/font-awesome.min.css" /%3E'));
        if (typeof cloudflare == "undefined") {
            document.write(decodeURI('%3Clink type="text/css" rel="stylesheet" href="css/fontawesome5.7.2/css/all.css" /%3E'));
        }
        else {
            alert('loading from cloudflare cdn');
        }
   } else {
        alert('loading from bootstrap cdn');
   }


/////I also tried ////////////////////////////////////////
function isFontAwesomeLoaded() {
    var span = document.createElement('span');
    span.className = 'fa';
    document.body.appendChild(span);
    var result = (span.style.fontFamily === 'FontAwesome');
    document.body.removeChild(span);
    return result;
}
alert(isFontAwesomeLoaded()); // always returns false even when fontawesome loads



///and this//////////////////////
window.onload = function () {
  var span = document.createElement('span'),
    headHTML = document.head.innerHTML;

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

  //if 'FontAwesome' didn't load, add a local fallback link to the head
  if (span.style.fontFamily !== 'FontAwesome') {
    headHTML += '<link rel="stylesheet" href="css/fontawesome5.7.2/css/all.css">';
    document.head.innerHTML = headHTML;
    alert("didntload")
  }

  document.body.removeChild(span);
};

Upvotes: 0

Views: 175

Answers (1)

FaizAzhar
FaizAzhar

Reputation: 459

With any CDN, if there's no cached asset found, the request will be sent directly to the origin server. You don't need to add the fallback mechanism manually. If you're referring to URLs external to your domain, well this article may be of interest to you: https://blog.cloudflare.com/fast-google-fonts-with-cloudflare-workers/

Upvotes: 1

Related Questions