zachleat/fontfaceonload

Fail load detection when url from google includes several weights

nobuti opened this issue · 2 comments

I'm trying to apply these scenario from @bevacqua performance workshop:
https://github.com/bevacqua/perfschool/tree/master/exercises/using_a_font_loader

That solution works like a charm... if the url has the defaults weights. I'm trying without success apply the same logic when working with a subset of fonts like these: https://fonts.googleapis.com/css?family=Lato:700,900|Bitter:400italic.

With this script:

  var ffol = global.FontFaceOnload;
  var html = document.documentElement;

  function watch (family) {
    function loaded () {
      html.className += ' ok-' + family.toLowerCase();
    }

    function notLoaded() {
      console.error("Error loading " + family + " font.");
    }

    ffol(family, {
      timeout: 10000,
      success: loaded,
      error: notLoaded 
    });
  }

  watch('Lato');
  watch('Bitter');

the fail callback is always thrown. Am I missing something?

Not completely sure, but maybe it's related (or it's the same issue) to #13.

@nobuti, try specifying a weight and style in the options, if you're not loading the 400/normal version of the font. I ran into this issue today, and specifying a weight of 700 was necessary for one where I didn't need the 400 weight.