CSS3 custom Font Face not working well in html view

Question

Dear folks, Im trying to figure out what is wrong in here, why the fonts set do not show up correctly in html live view in FireFox 4... I am clueless! Any insight will be greatly appreciated by me. Any at all! Thanks in advance. Cheers!

<style type="text/css" rel="stylesheet">
@charset "utf-8";

@font-face{
  font-family: "ZZZ";
  src: local('FONT'),
      url('http://www.site.org/FONT.ttf') format('truetype'),
      url('http://www.site.org/FONT.eot') format('eot'),
      url('http://www.site.org/FONT.otf') format ('otf'),
      url('http://www.site.org/FONT.woff') format('woff')
}

html, body{font-family: "ZZZ" !important}

.

PS. I changed the name to "ZZZ" deliberately into something else than the local file name "FONT" so that way I can assure that if someone does NOT have the font locally, it will proceed to download CSS3 url. This however does not work... (when changing ZZZ to Lithos Pro Regular, it works but that is no challenge... I want it to work naturally when no local font file is present.

Answer 1

There is an excellent guide here

http://blog.themeforest.net/tutorials/how-to-achieve-cross-browser-font-face-support/

Looks like this could be a version support issue - what version of firefox you using?

Answer 2

Internet Explorer仅支持.eot类型的字体，而Firefox，Chrome，Safari和Opera支持.ttf和.otf类型的字体。

Answer 3

尝试像这样放置本地字体：

html, body{font-family: "LithosProRegular", "ZZZ" !important}