For a while now, my project has been using font-face without any issues. However, I recently discovered that the font face is not working on Firefox versions 14 and 15, and probably also not on version 12 and above as discussed in this thread: http://css-tricks.com/forums/discussion/17337/font-face-problem-with-firefox-v-12/p1. My problem mirrors what was reported in that thread.
In summary, I am using font-face to load web fonts in the following manner:
@font-face {
font-family: 'TradeGothicLTStdCnBold';
src: url('/jovenestalentos/fonts/tradegothicltstd-bdcn20-webfont.eot');
src: url('/jovenestalentos/fonts/tradegothicltstd-bdcn20-webfont.eot?#iefix') format('embedded-opentype'),
url('/jovenestalentos/fonts/tradegothicltstd-bdcn20-webfont.woff') format('woff'),
url('/jovenestalentos/fonts/tradegothicltstd-bdcn20-webfont.ttf') format('truetype'),
url('/jovenestalentos/fonts/tradegothicltstd-bdcn20-webfont.svg#TradeGothicLTStdCnBold') format('svg');
font-weight: normal;
font-style: normal;
and then
#bea .bea {
font-family: 'TradeGothicLTStdCnBold';
font-size: 14px;
}
According to Firebug, the fonts are loading correctly. They work fine on Safari, Chrome, IE, and some versions of Firefox. I have tested it on 6 different versions of Firefox (v13-15) and it behaves inconsistently across them. I cannot pinpoint any specific reason for this.
I also checked the firefox configuration value `gfx.font_rendering.cleartype.always_use_for_content`, and noted that it is set to false in all versions of Firefox that I tested, even those where the fonts render correctly.
Live example:
Desired outcome:
To sum up: - The file paths are correct. - No cross-domain issues since all resources are within the same domain. - Inconsistent behavior across different versions of Firefox with no apparent cause. -Previously worked fine on an older version of Firefox, maybe before v12.
Any help would be greatly appreciated as this issue is really frustrating me. Thank you!