Css3 @fontface is not working with Chrome 17 and Firefox 10

Question

I'm trying this code For the @fontface for an arabic font :

@font-face {
font-family: 'MothnnaFont';
src: url('fonts/mothnna.eot'); /* IE9 Compat Modes */
src: url('fonts/mothnna.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('fonts/mothnna.woff') format('woff'), /* Modern Browsers */
    url('fonts/mothnna.ttf')  format('truetype'), /* Safari, Android, iOS */
    url('fonts/mothnna.svg#svgMothnnaFont') format('svg'); /* Legacy iOS */
}

I'm using the font in a class named demo :

.demo
{
    font-family:'MothnnaFont',Sans-Serif;
    width:800px;
    margin:10px auto;
    text-align:center;
    border:1px solid #666;
    padding:10px;
    direction: rtl;
}

This code is working on ie but it's not working on firefox 10 or chrome 17

Here is a demo http://tmr.hyperphp.com/font/demo.html

Here is how the font should look like

enter image description here

So anybody can help me to make this font appear a cross all browsers ?

Solved: just downloaded the font and converted it again and it's all working now thank you all for helping

Are you sure the path is correct? Everything else looks like it's about right. — Alex Morales, Feb 15 '12 at 13:27
I know these are basic questions but do you have a doctype and is the encoding set correctly? — Alex Morales, Feb 15 '12 at 14:28

score 1 · Answer 1 · answered Feb 24 '12 at 11:46

This syntax of embedding web-fonts is not bulletproof anymore. Try using the Fontspring syntax instead:

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

It's just the first double appearance of the "src"-attribute you have to fix.

This will solve your problem.

For more information about the syntax, take a look at this source. And by the way, fontsquirrel is also using this syntax as its default.

Css3 @fontface is not working with Chrome 17 and Firefox 10

1 Answers1

Linked