font-face bold does not work on Chrome and Firefox

advertisements

I am loading a font into my CSS by doing this:

@font-face{
    font-family: arialNarrow;
    src: url(../fonts/ArialNarrow.ttf);
    font-weight:normal;
    font-style:normal;
}
@font-face{
    font-family: arialNarrow;
    src: url(../fonts/ArialNarrowBold.ttf);
    font-weight:bold;
    font-style:normal;
}
@font-face{
    font-family: arialNarrow;
    src: url(../fonts/ArialNarrowItalic.ttf);
    font-style:italic;
    font-weight:normal;
}
@font-face{
    font-family: arialNarrow;
    src: url(../fonts/ArialNarrowBoldItalic.ttf);
    font-weight:bold;
    font-style:italic;
}

The normal style works in all browsers.

the bold and italic styles work correctly ONLY in IE9, but not in Chrome and FireFox. Am I doing something wrong?


I figured it out. I downloaded the font again, it seems that the font itself had an issue.