I'm experiencing a very odd behaviour when combining Google Webfont Loader (GWL) in async mode with Font Awesome fonts.
If I use GWL to load a couple of custom fonts, Font Awesome fonts are loaded 2 times. This is the code I use for GWL:
<script type="text/javascript">
WebFontConfig = {
custom: { families: ['proxima-nova', 'museo-slab'], urls: ['evacss/font-families.css'] }
};
(function () {
var wf = document.createElement('script');
wf.src = 'evajs/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script>
Inside evacss/font-families.css I have the font-family definitions of the two fonts above (proxima-nova and museo-slab) NO Font Awesome definition in there
Then before this I have the classic
<link rel="stylesheet" type="text/css" href="evacss/font-awesome.css">
Wich loads font awesome with its own font-family definition
But the result is this:
If I remove the GWL script and just keep my Font Awesome Css the result is the one expected with a single load for Font Awesome.
The same behaviour happens with this version of GWL
<script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script>
WebFont.load({
custom: { families: ['proxima-nova', 'museo-slab'], urls: ['evacss/font-families.min.css'] }
});
</script>
I really don't understand why webfont.js triggers a double download for my Font Awesome (in a more generic way for external font families wich I don't reference in GWL in any way)
This bug come from firebug, try with chrome or listen your connection without firebug.