CODEWITHSUNDEEP
cdnwebfonts
Kristen Grote
Kristen Grote

Reputation: 2777

Local Fallback for Google Web Fonts

The HTML5 Boilerplate uses a script for loading a local copy of jQuery if, for whatever reason, the Google CDN version fails to 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 like this with Google Web Fonts? Meaning: if the remote font fails to load, use a local copy of the font stored on your server instead.

Upvotes: 13

Views: 7664

Answers (3)

Jamie Barker
Jamie Barker

Reputation: 8256

I've just had this problem and thought of a solution just 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, however our website is run on a localhost and won't necessarily be connected to the internet. I created some @font-face declarations to the Ubuntu font, called it something else ("UbuntuFallback") and just put it in the font-family style list.

Voilá!

Upvotes: 23

Olivier C
Olivier C

Reputation: 965

A client-side fallback calling a css file containing the call different fonts (here 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);

Upvotes: 0

AardVark71
AardVark71

Reputation: 4126

If you download all the necessary webfonts and store it e.g. in a local file Webfonts.css you could 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: This is assuming that the cdn's fonts.googleapis.com and ajax.googleapis.com fail at the same time..

Upvotes: 1

Related Questions