two @font-face not acting like each other

Question

I'm using two @font-face in CSSreset.css exactly like each other, and just one of them works! This is the style code:

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

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

The second @font-face not working well. this is how I use them in my stylesheet:

#Download > a {
        font-family: 'BBCNassim';
    }

This is not working and shows "tahoma" font. the wierd part is, if the "BBCNassim" font not load correctly, the default browser font shows. So, when I use font-family: 'BBCNassim';, the font will be tahoma.

This is the "B Mitra" font witch shows and load correctly:

#Map_Eshterak {
        font-family: 'B Mitra';
    }

SCREENSHOT: https://i.stack.imgur.com/ptIz5.jpg

The problem is not from the font; because if i copy "B Mitra" fonts, and change the name to "BBC Nassim", the same thing will happen.

this is my directory : https://i.stack.imgur.com/WbYtI.png

In which browser are you seeing this problem. Can you please create a fiddle. — Green Wizard, Jan 03 '14 at 13:19
Is the BBCNassim font being requested and sent by the server? You can check in the networks tab. Also, can we see the markup around the link you are trying add the BBCNassim font to? — jfelsinger, Jan 03 '14 at 13:26
The screenshot isn't acessible from outside. And can you show the HTML where the fonts are supposed to be used? By the way, are you saying the url with the space in it works flawlessly and the other doesn't? Hm, funny. — Mr Lister, Jan 03 '14 at 13:43
@jfelsinger yep. both of them. http://i.imgur.com/ufBWuIo.png — Mehdi Hoseini, Jan 03 '14 at 13:52
@MrLister Sorry. Screenshot replaced. and this is the HTML: `
OK guys. I realized that Firefox and IE works fine and Show both fonts correctly. mybe the problem is because i'm using google chrome 32.0.1700.68 BETA. i'm going to download stable version and let you know. — Mehdi Hoseini, Jan 03 '14 at 14:21
I must say that the Chrome betas are always very stable for me. Currently using the v34 Canary without problems. — Mr Lister, Jan 03 '14 at 14:27
@MrLister Yes. I never had problem with unstable chrome too. but i think its the only option. — Mehdi Hoseini, Jan 03 '14 at 14:40

score 0 · Answer 1 · answered Jan 03 '14 at 14:20

0

Could it be the CSS selectors you're using? Does it work if you change your code to:

#Map_Eshterak {
        font-family: 'BBCNassim';
}

And as a side-note, once you get this working you may want to give a font stack, in case your @font-face fonts don't load properly. (For example, font-family: 'BBCNassim', Helvetica, sans-serif; will show Helvetica is BBCNassim isn't available)

answered Jan 03 '14 at 14:20

Meg

1,462
12
23

Hm, strange. I'd guess then that it's a problem with the font file. Are you able to re-save out the fonts? The accepted answer to [this question](http://stackoverflow.com/questions/12449512/why-does-one-of-these-font-face-render-in-ie8-but-the-others-dont?rq=1) may help you out. – Meg Jan 03 '14 at 16:42

two @font-face not acting like each other

1 Answers1