Geek asks and answers

Css3 @fontface not working with Chrome 17 and Firefox 10

I am trying to use this code For @fontface for 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 use a font in a class called 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 works on that, but it does not work on firefox 10 or chrome 17

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

This is what the font should look like

enter image description here

So can anyone help me get this font to cross all browsers?

Solved: just downloaded the font and converted it again, and it all works now, thanks everyone for the help

+3
source share
1 answer

This web font embed syntax is no longer bulletproof. Instead, try using the Fontspring syntax:

@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');
}

"src", .

.

. . , , fontsquirrel .

+1

More articles:


All Articles