Google Webfont Loader + FontAwesome issue

Question

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)

Answer 1

This bug come from firebug, try with chrome or listen your connection without firebug.