Local Fallback for Google Web Fonts

Question

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

Answer 1

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