DIN webfont in Firefox and IE not working

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

score 2 · Accepted Answer · answered May 24 '13 at 09:34

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/

score 1 · Answer 2 · answered May 24 '13 at 10:41

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).

DIN webfont in Firefox and IE not working

2 Answers2