4

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/how it should look

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.

2
  • Have you tried Google Web Fonts ? They provide a better cross-browser support . Maybe you can be inspired from their source code.
    – Raptor
    Sep 13, 2012 at 7:42
  • Yes I did. Unfortunatelly my client wants THAT font and not another. I use google web fonts whenever they let me. Thanks. Sep 13, 2012 at 7:53
3

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.

3

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;
1
  • Had the same problem using only .ttf and .otf fonts; changed the order (.otf) first and everything worked perfectly.
    – brunouno
    Aug 31, 2018 at 14:46
1

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"); }
3
  • Thanks Alvaro. I didn't reproduce your error in my console (believe me, is the first thing I look) but seeing that I was loading inorrectly the styles (..jovenestalentos//style...). That made me look the url's more closely. www.comoquierasc... works and comoquierasc... doesn't. It was a crossdomain issue after all. Sorry! and thanks all. Sep 13, 2012 at 7:50
  • 1
    In case you where checking Firebug's console, I've learnt that it doesn't always show all error messages. Built-in console is more reliable. Sep 13, 2012 at 8:02
  • This error have only showed up after I was playing around with the type of errors reported in the firefox inspector's console. It didn't show by default. Feb 19, 2015 at 6:16
1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.