Google web fonts down backup?

Question

I am wondering if there is a way to go okay, google web fonts is down use this as the font source instead? Something like how we do window.jquery check to see if google jquery cdn is down and serve an alternative file?

Answer 1

You can simply specify a web font version installed on your own server as the second option, e.g.

<link href='https://fonts.googleapisx.com/css?family=Cantarell' rel='stylesheet'>
<style>
@font-face {
    font-family: 'cantarellregular';
    src: url('cantarell-regular-webfont.eot');
    src: url('cantarell-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('cantarell-regular-webfont.woff') format('woff'),
         url('cantarell-regular-webfont.ttf') format('truetype'),
         url('cantarell-regular-webfont.svg#cantarellregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
body { font-family: Cantarell, cantarellregular; }
</style>

You will need a different name for the font family in your server; in the example I have used the name produced by FontSquirrel @font-face generator.

This way, the browser will try to fetch the font file first from the Google site, and if this fails for some reason, it will fetch the font file from your server.

I wonder why you don’t simply use the font from your own server, if you are worried about Google site being down. (It would be rare to see it down; but the connection from user’s device to Google site might be broken, even though connection to your site is OK.)

Answer 2

You can list multiple font families and they would be displayed in that order. For example

font-family: 'Skranji', cursive, Verdana, Geneva, sans-serif;

This will use the Google webfont Skranji, if that's not available it will bump it to Verdana, and so on.