We're calling on all EU-based Mozillians with iOS or iPadOS devices to help us monitor Apple’s new browser choice screens. Join the effort to hold Big Tech to account!

搜索 | 用户支持

防范以用户支持为名的诈骗。我们绝对不会要求您拨打电话或发送短信,及提供任何个人信息。请使用“举报滥用”选项报告涉及违规的行为。

详细了解

Why does CSS' "@font-face" not work in FF8.0?

  • 5 个回答
  • 6 人有此问题
  • 3 次查看
  • 最后回复者为 cor-el

more options

I am using embedded fonts via CSS' @font-face, which works perfectly in IE9, Safari 5.1.1 and Opera 11.52. However it does not work in FF8.0 (or Chrome 15.0.874.121) and falls back to Verdana.

Here is my CSS:

body,td,th { font-family: DragonwyckFont, Verdana, Geneva, sans-serif; }

@font-face { font-family: "DragonwyckFont"; src: url("../fonts/Dragonwyck_Normal.eot"); src: url("../fonts/Dragonwyck_Normal.eot?#iefix") format('embedded-opentype'), url("../fonts/Dragonwyck_Normal.ttf") format('truetype'); }

This is being tested on a W7 box, using localhost: on IIS.

Any help or advice would be much appreciated.

Thankyou in advance.

I am using embedded fonts via CSS' @font-face, which works perfectly in IE9, Safari 5.1.1 and Opera 11.52. However it does not work in FF8.0 (or Chrome 15.0.874.121) and falls back to Verdana. Here is my CSS: body,td,th { font-family: DragonwyckFont, Verdana, Geneva, sans-serif; } @font-face { font-family: "DragonwyckFont"; src: url("../fonts/Dragonwyck_Normal.eot"); src: url("../fonts/Dragonwyck_Normal.eot?#iefix") format('embedded-opentype'), url("../fonts/Dragonwyck_Normal.ttf") format('truetype'); } This is being tested on a W7 box, using localhost: on IIS. Any help or advice would be much appreciated. Thankyou in advance.

所有回复 (5)

more options

Maybe it is caused by the ../ Does it work if you place the fonts in the same directory as the CSS file or if you use a full path that starts with the root (http://xxx.com/path/fonts/Dragonwyck_Normal.ttf)?

You may also need to send special access headers.

more options

Hi cor-el,

Thanks for your very quick reply, unfortunately the solutions you offered have been unsuccessful.

I did as you suggested (including deleting the relative path and placing the fonts in the same directory as the CSS) and followed all the advice given in the references you made.

I am not going across domains so Access Control Headers are not required.

Bizarrely, the link from the demo (https://developer.mozilla.org/en/CSS/@font-face) works perfectly but, when I replicate it using the full path to Dragonwyck_Normal.ttf, it doesn't.

My little brain is starting to fry and I must be doing something completely daft but, with just half a dozen lines of code, I fail to see how it could be more simple!

CSS: body,td,th { font-family: "Dragonwyck", serif; }

@font-face { font-family: "Dragonwyck"; src: url("Dragonwyck_Normal.ttf"); }

Any ideas?

Regards,

Chaindrive.

由Chaindrive于修改

more options

You can try to check the font in case there is a problem with it.

Can you post a link?


A good place to ask advice about web development is at the mozillaZine Web Development/Standards Evangelism forum.
The helpers at that forum are more knowledgeable about web development issues.
You need to register at the mozillaZine forum site in order to post at that forum.

See http://forums.mozillazine.org/viewforum.php?f=25

more options

Cor-el, thank you!

The Fontface Generator worked perfectly!

I still am not sure why it should work in IE and the others but not FF but, hey-ho, I'm not going to worry too much about that at this time.

Once again, thanks for your help - very much appreciated!

more options

You're welcome