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

[MBAsfoor]

I'm trying this code For the @fontface :

@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

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

[markbrown4]

That look ok at a glance, have you got a live link?
Have you got mothnna.woff and mothnna.ttf in the /fonts/ directory?

Edit: have you tried without the 'direction: rtl' declaration?

[MBAsfoor]

Sorry there is no live link to it i'm testing this code locally before i apply it to the site

I tried removing the

direction: rtl

it didn't change any thing

[MBAsfoor]

Sorry just a duplicated post by accident

[ralph.m]

Where is the CSS file in relation to the fonts? (I'm checking your file paths here.)

[MBAsfoor]

The fonts are in a folder called 'fonts' next to the css file

[ralph.m]

The fonts are in a folder called 'fonts' next to the css file

When you say "next to", do you mean the CSS file and the /fonts/ folder are in the same folder together? E.g.

/folder/
    styles.css
    /fonts/

If that's your structure, then that's OK, so it's not the issue.

[MBAsfoor]

there is a link to a test page

http://tmr.hyperphp.com/font/demo.html

[ralph.m]

OK, so the next obvious question is: are the fonts definitely in that folder?

Also, out of interest, what happens if you modify your code to something like this?

@font-face {
    font-family: 'MothnnaFont';
    src: url('fonts/mothnna.eot');
    src: local('☺'), url('fonts/mothnna.woff') format('woff'), url('fonts/mothnna.ttf') format('truetype'),  url('fonts/mothnna.svg#svgMothnnaFont') format('svg'); 
    font-weight: normal;
    font-style: normal;
}

[MBAsfoor]

Yes you can see a demo of it here http://tmr.hyperphp.com/font/demo.html

[ralph.m]

there is a link to a test page

http://tmr.hyperphp.com/font/demo.html

The font is actually working for me in Firefox and Chrome anyway.

[Paul O'B]

Try putting the font files in the same directory as the css file and not in a sub folder to see if there is an issue there. I believe Firefox has a strict_origin_policy setting that may affect local resources like fonts.

Otherwise put a demo online and then it will be easier for us to check.

Edit:


You replied while I was thinkking about it
Seems it may be the issue I mentioned above with local files.

[MBAsfoor]

It still not working for me

[MBAsfoor]

Did't work

[Paul O'B]

You mean the font in the online link isn't working for you? It seems to be working for me.

[MBAsfoor]

Yes even the online link didn't work

[Paul O'B]

This is what I see in Firefox and IE.

[MBAsfoor]

no that's not the font type that i want it should look like this fontface.PNG

[Paul O'B]

All I can suggest is that you run the font back through the font-squirrell generator and try again in case something went wrong before.

I assume you do have a license to embed that font online if it's not a free font?

[alexschmidt]

Hey,

perhaps the problem is that your CSS is too large or not W3C compliant...

I have tried Rankvision.com's CSS Validator and it shows a lot of errors for the CSS code you've sent...

Perhaps it's worth a try to run it through the tool...

[MBAsfoor]

It's a free font downloaded form here: http://projects.arabeyes.org/project.php?proj=Khotot

I just downloaded it again and reconvert it using http://www.font2web.com/ and it worked

[MBAsfoor]

@alexschmidt thanks for your suggestion

[Paul O'B]

It's a free font downloaded form here: http://projects.arabeyes.org/project.php?proj=Khotot

I just downloaded it again and reconvert it using http://www.font2web.com/ and it worked

Good

[MBAsfoor]

Thank you all for helping