How to import a css file only for Firefox but not for other browsers?

I have a css file that I only want to be visible to Firefox browsers. I thought I was super-smart coming up with

@-moz-document url-prefix() {
    @import url("/a-large-css-file.css");
}

...only to find out that @import directives cannot be nested like that.

More details:

The file is heavy, so it's not an option for me to include its content inline inside the "conditional" as I don't want for it to affect total request size for other browsers
The file contains a font-face declaration with the font itself base64-encoded. Why you ask? Firefox does not allow for fonts to be downloaded from a different subdomain and that's how twe host static content. There's a nice recap of the issue here and here
If you've looked through the links in the point above, you'd see a suggestion to add an Access-Control-Allow-Origin http header - unforunately this is not an option for me given our infrastructure setup and deployment procedures.

Even more details:

Static content is hosted on a url similar to resources.environmentN.domain.com while the pages' urls are similar to environmentN.domain.com where N is different across the environments.
We're have Apache Tomcat running Liferay Portal.

At this stage I'm open to almost any workaround :)

Edit

I probably should have phrased this differently, but I must mention that I'm probably not open to javascript workarounds, the reason for that would be an unstyled content flash even after the resource is successfully cached locally - this would be the case with solutions proposed so far.

My apologies for the confusion!

Solution

You should really just bite the bullet and get the server side fixed, since http://dev.w3.org/csswg/css3-fonts/#same-origin-restriction requires the Firefox behavior and the other browsers will update to it at some point.