DIN webfont in Firefox and IE not working - css

Question

I'm having problems with implementing the DIN font in Firefox and MSIE. It works fine in Chrome.
Here's the import code:
#font-face {
font-family: DINweb;
src: url('/wp-content/themes/quickstep-child/DINWeb.eot');
src: url('/wp-content/themes/quickstep-child/DINWeb.eot?#iefix') format('embedded-opentype'),
url('/wp-content/themes/quickstep-child/DINWeb.woff') format('woff'),
url('/wp-content/themes/quickstep-child/DINWeb.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
The font is being called like this in CSS:
font-family: DINWeb, sans-serif!important;
The website is www.andvordgrafisk.no

Answer 1

This syntax is working for me:
#font-face {
font-family: 'DIN_Medium';
src: url('../fonts/DIN_Medium.eot'); /* IE9 Compatibility Modes */
src: url('../fonts/DIN_Medium.eot?') format('eot'), /* IE6-IE8 */
url('../fonts/DIN_Medium.otf') format('otf'),
url('../fonts/DIN_Medium.ttf') format('truetype'); /* Safari, Android, iOS */
}
If you don't have the extension, you can generate them here http://www.freefontconverter.com/

Answer 2

The Firefox console shows error messages that say, both for the .woff resource and the .ttf resource, “downloadable font: download failed [...] bad URI or cross-site access not allowed”. The Firebug console says: “NetworkError: 404 Not Found - http://www.andvordgrafisk.no/wp-content/themes/quickstep-child/DINWeb.ttf”, but only for the .ttf file.
Oddly enough, it seems that if you remove url('/wp-content/themes/quickstep-child/DINWeb.ttf') format('truetype'), Firefox starts using the font. So it’s as if the nonexistent .ttf is the problem, even though Firefox should not even fetch it (as the .woff resource is mentioned first).