Local error for Google web fonts

Question

HTML5 Boilerplate uses a script to load a local copy of jQuery if, for whatever reason, the Google CDN version does not load:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script> 

Is it possible to do something similar using Google Web Fonts? Meaning: If the remote font does not load, use a local copy of the font stored on your server instead.

Answer 1

I had this problem and I thought of a solution right after I came to this page:

 @import url(http://fonts.googleapis.com/css?family=Ubuntu:400,400italic,700,700italic); @font-face { font-family: "UbuntuFallback"; font-style: normal; font-weight: normal; src: url("/webfonts/ubuntu/ubuntu-webfont.eot?#iefix") format("embedded-opentype"), url("/webfonts/ubuntu/ubuntu-webfont.woff") format("woff"), url("/webfonts/ubuntu/ubuntu-webfont.ttf") format("truetype"); } @font-face { font-family: "UbuntuFallback"; font-style: normal; font-weight: bold; src: url("/webfonts/ubuntu/ubuntu-bold-webfont.eot?#iefix") format("embedded-opentype"), url("/webfonts/ubuntu/ubuntu-bold-webfont.woff") format("woff"), url("/webfonts/ubuntu/ubuntu-bold-webfont.ttf") format("truetype"); } @font-face { font-family: "UbuntuFallback"; font-style: italic; font-weight: normal; src: url("/webfonts/ubuntu/ubuntu-italic-webfont.eot?#iefix") format("embedded-opentype"), url("/webfonts/ubuntu/ubuntu-italic-webfont.woff") format("woff"), url("/webfonts/ubuntu/ubuntu-italic-webfont.ttf") format("truetype"); } @font-face { font-family: "UbuntuFallback"; font-style: italic; font-weight: bold; src: url("/webfonts/ubuntu/ubuntu-bolditalic-webfont.eot?#iefix") format("embedded-opentype"), url("/webfonts/ubuntu/ubuntu-bolditalic-webfont.woff") format("woff"), url("/webfonts/ubuntu/ubuntu-bolditalic-webfont.ttf") format("truetype"); } body { font-family: Ubuntu, UbuntuFallback, Tahoma, Sans-Serif; } 

So, I wanted to use the Ubuntu font, but our site runs on a local host and will not necessarily be connected to the Internet. I created some @ font-face declarations for an Ubuntu font, named it something else ("UbuntuFallback"), and simply put it on the font style list.

Voila!

Answer 2

If you download all the necessary websites and save them, for example. in the local Webfonts.css file you can do something like this:

 <script type="text/javascript"> if (window.jQuery) { document.write(unescape('%3Clink href="http://fonts.googleapis.com/css?family=OFL+Sorts+Mill+Goudy+TT|Yanone+Kaffeesatz|Tangerine" rel="stylesheet" type="text/css"%3E')); } else { document.write(unescape('%3Clink href="css/WebFonts.css" rel="stylesheet" type="text/css"%3E')); document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>') } </script> 

Note. It is assumed that cdn fonts.googleapis.com and ajax.googleapis.com will work simultaneously.

Answer 3

Client backup call that calls a css file containing a call to different fonts (here is the Tangerine font):

 (function test($){ var $span = $('<span style="display:none;font-family:Tangerine"></span>').appendTo('body'); // span test creation if ($span.css('fontFamily') !== 'Tangerine'){ $('head').append('<link href="./Styles/Public/Fonts.css" rel="stylesheet">'); // fallback link } $span.remove(); // span test remove })(jQuery);