Handle when Google Fonts fail/slow to load?

Howard picture Howard · Sep 14, 2014 · Viewed 11.9k times · Source

The Google fonts is now being blocked/heavily throttled in China, and our website is very slow now.

We want to way to handle the failure situation instead of letting our user to wait. It is okay to fail back to use the system font when Google failed to delivery, so, how to fix that if we use the code below?

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

Will change to use the JS API fix that?

WebFontConfig = {
    google: { families: [ 'Open+Sans::latin' ] }   };   

   (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);   })();

Answer

karolus picture karolus · Dec 10, 2016

Although I can't say if this would work in China, but elsewhere, this issue could be solved by using https instead of http in the link URL.