Can web font loader provide local fallback if a CDN font fails?

[sciascia]

I'm sorry to be posting here but I can't find any info I understand - I have the following which works great:

  <script src="//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
  <script>
    WebFont.load({
      google: {
        families: ['Flamenco'],
      },
      custom: {
        families: ['FontAwesome'],
        urls: [ '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' ]
      }
    });
  </script>

But how do I use the .wf-fontawesome-n4-inactive class that gets added to the html tag to conditionally load a local version? Obviously .wf-fontawesome-n4-inactive @font-face {} makes no sense.

Any pointers in the right direction would be much appreciated.

Cheers

[bramstein]

You can use the callbacks to load another font if the first one fails. In this case you would listen for the fontinactive event and check if the name of the font matches the one you want to load a fallback for:

WebFont.load({
  fontinactive: function (family, fvd) {
    if (family === 'FontAwesome') {
      WebFont.load({
          ...
      })
    }
  },
  custom: {
    families: ['FontAweome'],
    urls: ['//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css']
  }
});

Let me know if you have any other questions.

[sciascia]

Awesome, thank you so much.

Just one last thing, how would I test to see if the actual WebFont library has loaded?

I've tried a bunch of stuff and this seems to work but it takes about 5 seconds before the local fonts display so am not sure if this is right.

Or is window a jQuery function so there's a delay while jQuery loads locally?

Hope that makes sense - sorry if this is easy.

<script src="//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
<script>window.WebFont || document.write('<script src="assets/js/webfont.js"><\/script>')</script>
<script>
  WebFont.load({
    fontinactive: function (family, fvd) {
      if (family === 'Flamenco' && 'FontAwesome') {
        WebFont.load({
          custom: {
            families: ['Flamenco', 'FontAwesome'],
            urls: [ '/assets/fonts/local-fonts.css' ]
          }
        })
      }
    },
    google: {
      families: ['Flamenco'],
    },
    custom: {
      families: ['FontAwesome'],
      urls: [ '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' ]
    }
  });
</script>

[bramstein]

I think your current approach is OK, although I don't think it is necessary to provide a fallback for the script. The Google CDN is used by millions of websites and highly reliable (and so is their web font service.)

[sciascia]

Thanks for that, I realise Google's CDN is unlikely to go down but I've had this issue using jQuery from a CDN in the past (once) - the client wasn't happy!

Cheers

Ben

[ghost]

Stumbled upon this looking for a solution to a circumstance for when the very reliable Google CDN doesn’t work: in China!

[adamwintle]

I just stumbled upon this too 👍 using this method as a fall back to local fonts for sites with heavy China traffic

[BenceSzalai]

if (family === 'Flamenco' && 'FontAwesome') {

This should probably be more like:

 if (family === 'Flamenco' || family === 'FontAwesome') {

However since these are all the fonts defined, the whole conditional can be omitted and WebFont.load(... called directly.