Local Fallback für Google Web Fonts

Question

Die HTML5 Boilerplate ein Skript verwendet eine lokale Kopie von jQuery für das Laden, die Google CDN Version nicht geladen werden:

<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> 

Ist es möglich, etwas zu tun dies mit Google Web Fonts? Bedeutung: Wenn die Remote-Schriftart nicht geladen werden kann, verwenden Sie stattdessen eine lokale Kopie der auf Ihrem Server gespeicherten Schriftart.

Answer 1

Wenn Sie alle notwendigen Webfonts herunterladen und z.

<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> 

Hinweis: in einer lokalen Datei Webfonts.css Sie so etwas tun könnte Dies wird unter der Annahme, dass die CDN fonts.googleapis.com und ajax.googleapis.com scheitern zugleich ..

Answer 2

ich habe gerade dieses Problem und dachte an eine Lösung hatte kurz nachdem ich zu dieser Seite kam:

@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; 
} 

Also wollte ich die Ubuntu-Schriftart verwenden, aber unsere Website auf einem lokalen Host ausgeführt wird und gewann‘ t muss unbedingt mit dem Internet verbunden sein. Ich habe einige @ font-face-Deklarationen für die Ubuntu-Schriftart erstellt, sie etwas anderes genannt ("UbuntuFallback") und sie einfach in die Liste der Schriftart-Familien-Stile eingefügt.

Voilá!

Answer 3

Ein clientseitige Rückfall eine CSS-Datei mit dem Aufruf verschiedene Schriftart (hier Tangerine Schrift) Aufruf:

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