Fallback locale per Google Web Fonts

Question

L'HTML5 Boilerplate utilizza uno script per il caricamento di una copia locale di jQuery, se, per qualsiasi motivo, la versione di Google CDN non riesce a caricare:

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

E 'possibile fare qualcosa di simile questo con Google Web Fonts? Significato: se il carattere remoto non riesce a caricare, utilizzare una copia locale del font memorizzato sul server.

Answer 1

Se si scaricano tutti i Webfonts necessari e lo si memorizza, ad es. in un file locale Webfonts.css si potrebbe fare qualcosa di simile:

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

Nota: Ciò presuppone che il CDN fonts.googleapis.com e ajax.googleapis.com sicuro allo stesso tempo ..

Answer 2

ho appena avuto questo problema e il pensiero di una soluzione subito dopo sono venuto a questa pagina:

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

Così ho voluto usare il font Ubuntu, tuttavia il nostro sito web è gestito in un host locale e ho vinto' essere necessariamente connesso a Internet Ho creato alcune dichiarazioni @ font-face al font di Ubuntu, l'ho chiamato qualcos'altro ("UbuntuFallback") e l'ho messo semplicemente nella lista degli stili della famiglia dei font.

Voilá!

Answer 3

Un fallback sul lato client chiamando un file CSS che contiene i call diversi tipi di carattere (qui carattere Mandarino):

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