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

9
votes

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.

2
htmlcssfontstypographygoogle-font-api
I think you can just follow the url() path with a local() path in the src rule - the browser is supposed to stop looking when it finds one it can load. Haven't tried it, though. – Tieson T.
According to the spec: "When a font is needed the user agent iterates over the set of references listed, using the first one it can successfully activate." - w3.org/TR/css3-webfonts/#descdef-src – Tieson T.
This is an opinion, not an answer: I think you're overthinking it. I would just specify a fall-back system font in your CSS in the event that Google's fonts don't load. First, are you really worried about Google's servers being down? And second, is your site still usable without the specified web font? (It probably should be) – chipcullen
If you've downloaded the files why not just use the self hosted ones and forget about referencing Googles ones? – Billy Moat
@chipcullen About Google being down... of course not, I was thinking more on the visitor NOT being able to access Google font service. And for being unusable, of course it still will be usable, but it's more about bringing the PSD to HTML, so al element correctly matches their corresponding sizes. I know Photoshop renders fonts it's own way, but it's better than designing with the default browser font. – Armando Pérez Marqués

2 Answers

13
votes

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.

8
votes

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.