@Font-Face Custom fonts not working in Firefox

Question

I'm having trouble getting a custom, non-websafe font to work in Firefox. I have it working in Chrome, Opera and Safari using the following code:

@import url(http://fonts.googleapis.com/css?family=Antic+Slab);

@font-face {
font-family: 'BadgerFont';
src: url('http://www.vectorthatfox.co.uk/badgerandkingdom/fonts/oratorstd-webfont.eot');
src: url('http://www.vectorthatfox.co.uk/badgerandkingdom/fonts/oratorstd-webfont.eot?#iefix') format('embedded-opentype'),
     url('http://www.vectorthatfox.co.uk/badgerandkingdom/fonts/oratorstd-webfont.woff') format('woff'),
     url('http://www.vectorthatfox.co.uk/badgerandkingdom/fonts/oratorstd-webfont.ttf') format('truetype'),
     url('http://www.vectorthatfox.co.uk/badgerandkingdom/fonts/oratorstd-webfont.svg#orator_stdregular') format('svg');
font-weight: normal;
font-style: normal;
}

body{
font-family: BadgerFont, 'Antic Slab', Serif;
letter-spacing: 1px;
}

What am i missing here? Heres a link to the site incase you want to see for yourself.

Answer 1

By default, Firefox will only accept relative links. Firefox (which supports @font-face from v3.5) does not allow cross-domain fonts by default. This means the font must be served up from the same domain (and sub-domain) unless you can add an “Access-Control-Allow-Origin” header to the font.

Or, just load the font some other way (locally or with a CDN)

https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS#Access-Control-Allow-Origin

Answer 2

You should learn to use your developer tools in Firefox. Fifth console message is this:

[08:28:41.886] Unrecognized at-rule or error parsing at-rule '@import'. @ http://cdn.bigcartel.com/theme_stylesheets/19013562/2771282761/theme.css:474

From MDN :

The @import CSS at-rule allows to import style rules from other style sheets. These rules must precede all other types of rules, except @charset rules; as it is not a nested statement, it cannot be used inside conditional group at-rules.

EDIT

Please look in your console, it gives you all the answers

[11:00:17.697] downloadable font: download failed (font-family: "BadgerFont" style:normal weight:normal stretch:normal src index:1): bad URI or cross-site access not allowed
source: http://www.vectorthatfox.co.uk/badgerandkingdom/fonts/oratorstd-webfont.woff @ http://cdn.bigcartel.com/theme_stylesheets/19013568/2771283940/theme.css

As the message says, Firefox will not allow you to embed cross-domain fonts. If you want to use that font, then download them from that website, if you are allowed, and upload them to your own domain and link to them yourself.