Why does one font work in IE but the other doesn't

Question

HTML

<span style="font-family: 'blackjackregular'; font-size: 18pt;">My</span>
<span style="font-family: 'trajanpro'; font-size: 14pt;">WEST</span>

Font css:

@font-face {
    font-family: 'trajanpro';
    src: url('trajanpro-regular.eot');
    src: url('trajanpro-regular.eot?#iefix') format('embedded-opentype'),
         url('trajanpro-regular.woff') format('woff'),
         url('trajanpro-regular.ttf') format('truetype'),
         url('trajanpro-regular.svg#trajanpro_regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'blackjackregular';
    src: url('blackjar-webfont.eot');
    src: url('blackjar-webfont.eot?#iefix') format('embedded-opentype'),
         url('blackjar-webfont.woff') format('woff'),
         url('blackjar-webfont.ttf') format('truetype'),
         url('blackjar-webfont.svg#blackjackregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

IE Shows:

FF and Chrome Shows:

As you can see the MY is correct in both IE and other browsers but why isn't WEST not changing font in IE?

Answer 1

Trajan Pro is Adobe's proprietary font and might not have a license for embedding it as a web font. Embedding it with @font-face probably violates the EULA. To use it you'll need to use a service like Typekit. Please see details here: https://typekit.com/fonts/trajan-pro-3

EDIT:

After some more digging here's an interesting link, stating that IE implements a flag in EOT files restricting use of fonts. Other browsers do not implement this feature, or plan to, hence difference in behavior.

Answer 2

Seems to be the EOT flags on the font that IE applies, when the other browser don't, as Jacek Glen said.

You should check for free equivalent to Trajan, like Cinzel :http://www.google.com/fonts/specimen/Cinzel

I'm not sure, but try that :

@font-face {
font-family: 'trajanpro';

src: url('trajanpro-regular.eot?#iefix') format('embedded-opentype'),
     url('trajanpro-regular.woff') format('woff'),
     url('trajanpro-regular.ttf') format('truetype'),
     url('trajanpro-regular.svg#trajanpro_regular') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'blackjackregular';

src: url('blackjar-webfont.eot?#iefix') format('embedded-opentype'),
     url('blackjar-webfont.woff') format('woff'),
     url('blackjar-webfont.ttf') format('truetype'),
     url('blackjar-webfont.svg#blackjackregular') format('svg');
font-weight: normal;
font-style: normal;
}

I just removed the first "src" property, that shoudn't be specified twice. No idea why that would work for "My" and not for "west"...