How to load self hosted font files if the GoogleFont service is unavailable?

Question

I want to use a font collection from Google Fonts directory. I selected the styles and include the CSS link tag in my project's template.

Alternatively, with Google Fonts you can also download the collection, and what you get is a zip file with all the font's styles.

I can create a CSS equivalent of the one Google gives me to include in the HTML, so I want to provide the self hosted font files as fallback, if the visitor can't access the Google Font API.

How do I setup this, and preventing both the Google font file and the self hosted font file from being downloaded? If the user does has access to Google Fonts, it's browser shouldn't download the self hosted version of the font.

Answer 1

You have 3 options:

1. Use 2 sets of @font-face at-rules, using different font-family names (e.g. "Droid Sans" and "Droid Sans Local"), and then using a font stack like "Droid Sans", "Droid Sans Local", Helvetica, Arial, sans-serif. However, this will cause both fonts to be downloaded, increasing load time.
2. Use a single set of @font-face at-rules, but use 2 sets of src attributes. This too may increase loading time if the browser decides to download all the font files specified.
3. Do mirroring at the network layer via DNS, like most CDNs do. This requires network setup, but your CSS would be unchanged, and it's most transparent to the browser, requiring no extra downloads.

Google Web Fonts is already employing the 3rd option, so I personally wouldn't bother if you're already using a CDN-hosted source. But it may be worthwhile if you're using fonts from a less reliable source. But if you're going to go through the effort to set this up for your fonts, why not set it up for all of your static resources (images, stylesheets, JS, etc.)? The most logical course of action is to just get a free or paid CDN to host all of your static assets on.

Answer 2

I would recommend just self hosting them. This is fontsprings' "bullet-proof" font-face syntax.

@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
     url('myfont-webfont.woff') format('woff'), 
     url('myfont-webfont.ttf')  format('truetype'),
     url('myfont-webfont.svg#svgFontName') format('svg');
}

Having all four of these set will ensure that it works across browsers. Just make sure to have your font in all four types. Font Squirrel has great kits for fontface as well.