Icon-font not visible in firefox

Question

I have added with @fontface an iconfont. The only problem is, that it is not visible under firefox. I have the newest version of firefox. Safari and Chrome are working perfectly fine.

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

score 2 · Accepted Answer · answered Jan 26 '13 at 21:46

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

For font-face kit generations you can use:

So what was the solution? The code looks the same as in the question, except for order, which should not matter here, should it? — Jukka K. Korpela, May 14 '13 at 04:04

score 0 · Answer 2 · answered Jan 26 '13 at 21:38

Try this:

@font-face {
    font-family: 'iconFont';
    src: url('../fonts/iconFont.eot');
    src: url('../fonts/iconFont.eot') format('embedded-opentype'), url('../fonts/iconFont.svg') format('svg'), url('../fonts/iconFont.woff') format('woff'), url('/fonts/iconFont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

avoid the shorthand font format

@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9 */
}

Icon-font not visible in firefox

2 Answers2