parallel loading of webfonts issue

[jedierikb]

When attempting to use webfontloader two times, one of the requests fails its active callback:

http://codepen.io/jedierikb/pen/JRbxXK

var $x = document.getElementById('x');
var addItem = function( list, itemText ) {
  var $i = document.createElement( 'li' );
  $i.innerHTML = itemText;
  list.appendChild( $i );
}

WebFont.load({
  google: {
    families: ['Lato']
  },
  active: function( ) {
    addItem( $x, '~~> A active' );
  },
  inactive: function( a, b ) {
    addItem( $x, 'A inactive' );
  },
  loading: function( ) { 
    addItem( $x, 'A loading'); 
  },
  fontloading: function(familyName, fvd) { 
    addItem( $x, ['A fontLoading', familyName, fvd].join(' ') );
  },
  fontactive: function(familyName, fvd) { 
    addItem( $x, ['A fontactive', familyName, fvd].join(' ') );
  },
  fontinactive: function(familyName, fvd) { 
    addItem( $x, ['A fontinactive', familyName, fvd].join(' ') );
  }
});

WebFont.load({
  google: {
    families: ['Oswald']
  },
  active: function( ) {
    addItem( $x, '~~> B active' );
  },
  inactive: function( a, b ) {
    addItem( $x, 'B inactive' );
  },
  loading: function( ) { 
    addItem( $x, 'B loading'); 
  },
  fontloading: function(familyName, fvd) { 
    addItem( $x, ['B fontLoading', familyName, fvd].join(' ') );
  },
  fontactive: function(familyName, fvd) { 
    addItem( $x, ['B fontactive', familyName, fvd].join(' ') );
  },
  fontinactive: function(familyName, fvd) { 
    addItem( $x, ['B fontinactive', familyName, fvd].join(' ') );
  }
});

I am aware I could batch all of my font requests together into one call with webfontloader to sidestep this problem (e.g. families: ['Lato', 'Oswald']). However, due to the nature of our web app, this is not a good solution -- we have multiple components requesting their own fonts.

(this bug is a better explanation of the issue first described https://github.com/typekit/webfontloader/issues/344)

[voondo]

I confirm this issue

[Ni55aN]

Still have https://jsfiddle.net/Ni55aN/tpk0u6y8/5/