Font-face does not work on firefox. Works well on others

Question

I have a project that's been using font-face without problem for some time. Today I checked and font face is not working on firefox v14 and v15 provably also not working on v12+ as is the case in this thread: http://css-tricks.com/forums/discussion/17337/font-face-problem-with-firefox-v-12/p1 My problem is exactly the same as in the previous thread.

To summarize. I'm using font face to load web fonts like this:

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

The fonts are loading correctly according to firebug. It works on safari, chrome, IE and some firefoxs. I've tried 6 firefoxs (v13-15) and it worked in some of them and not on others. I haven't been able to establish any reason why.

I've also looked for the firefox configuration value gfx.font_rendering.cleartype.always_use_for_content; And i've noticed is set to false in all the firefoxs I tested, even the ones that work correctly.

Live example: http://comoquierascolacao.com/jovenestalentos/

How it should look: http://postimage.org/image/n2r9fxdsv/

To summarize: - The routes work. - The routes are in the same domain, no cross-domain issues. - It does work in some firefoxs and it doesn't in others (no reason that i can figure out). - It did work in my own firefox before, maybe prior to v12.

Thank you all, any help will be greatly appreciated because this is driving me nuts.

Solution 1

Well, my fault. It was a crossdomain problem after all. The fonts where loaded from www.domain...even when accessing http://domain... Reddirecting everyone to www.domain should solve the problem and I think will be a good practice from now on. Another solution would be to load the fonts with relative routes.

Solution 2

I had the same problem about FF doesnt show font-face properly. Here is the workaround for who may have this problem:

Try declare "eot" fonts at the end of the block. Like:

@font-face {
font-family: 'TradeGothicLTStdCnBold';
src: 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');
src: url('/jovenestalentos/fonts/tradegothicltstd-bdcn20-webfont.eot');
src: url('/jovenestalentos/fonts/tradegothicltstd-bdcn20-webfont.eot?#iefix') format('embedded-opentype');
font-weight: normal;
font-style: normal;

Solution 3

The JavaScript console (Herramientas-> Desarrollador web-> Consola de errores) displays several errors:

Fecha y hora: 13/09/2012 9:41:37
Advertencia: downloadable font: no supported format found (font-family: "TradeGothicLTStdCnBold" style:normal weight:normal stretch:normal src index:4)
source: (end of source list)
Archivo de origen: http://www.comoquierascolacao.com/jovenestalentos//style/style.css?v=1
Línea: 0
Código fuente:
@font-face {   font-family: "TradeGothicLTStdCnBold";   font-style: normal;   font-weight: normal;   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"); }

Solution 4

my solution: on domain with www. work everything fine, but without www. FF problem apeared. so I use redirection to www. in .httaccess:

RewriteEngine on
RewriteCond %{HTTP_HOST} ^example\.com$ [NC]
RewriteRule ^(.*)$ http://www.example.com/$1 [R=301,L]

and it works! Thanks Hanoc

View more solutions