External CSS font face only showing in Chrome (no IE and Firefox)

I have a font-face CSS:

<style>
@font-face {
font-family: 'museo_slab500';
src: url('/css/fonts/museo_slab_500-webfont.eot');
src: url('/css/fonts/museo_slab_500-webfont.eot?#iefix') format('embedded-opentype'),
        url('/css/fonts/museo_slab_500-webfont.woff') format('woff'),
        url('/css/fonts/museo_slab_500-webfont.ttf') format('truetype'),
        url('/css/fonts/museo_slab_500-webfont.svg#museo_slab500') format('svg');
font-weight: normal;
font-style: normal;
}
</style>

Quite straightforward. The problem is:

If I keep this font-face definition alone in its .css file (and the font-family is applied to the various headings, body in another .css file) I don't see the font applied in any browser. I checked with firebug, everything is read, the font is downloaded but is not applied.
If I move the font-face definition from an external .css file and put it INLINE in the HTML everything shows correctly.

If I remove the above code from inline inside my page and put it in an external .css and put this instead of the style tags:

        <link type="text/css" rel="stylesheet" href="/adminskin/default/css/font-families.css" />

. Any hint on why this happens? I'm going crazy.

Solution

Ok ..... I found the answer to this madness.

It seems that while Google Chrome has no problems at all, both IE and Firefox (didn't try Safari or Opera) can't cope with absolute url pointing to an external .css with a font face definition. So while this works in all browser (inside the .css is just the font-face definition)

<link rel="stylesheet" type="text/css" href="/skinadmin/default/css/font-families.min.css?v=2.0.0.0" />

This works ONLY in Google Chrome.

<link rel="stylesheet" type="text/css" href="http://www.yoursite.com/skinadmin/default/css/font-families.min.css?v=2.0.0.0" />

Isn't this madness? I think it is.