Why does CSS' "@font-face" not work in FF8.0?
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.
Alle antwoorden (5)
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.
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.
Bewerkt door Chaindrive op
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.
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!
You're welcome