Handle when Google Fonts fail/slow to load?

Question

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);   })();

Solution 1

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.

Solution 2

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

Use https:

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

It works fine.