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

HTML & CSS
1

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 ?

2

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?

3

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

4

Sorry just a duplicated post by accident

5

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

6

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

7

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.

8

there is a link to a test page

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

9

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;
}
10

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

11

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

12

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.

13

It still not working for me

14

Did’t work

15

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

16

Yes even the online link didn’t work

17

This is what I see in Firefox and IE.

18

no that’s not the font type that i want it should look like this

19

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?

20

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…