How to properly render @font-face in Firefox?

Question

I am attempting to use @font-face for Chrome, Safari, Firefox, and IE. For IE i am not even sure what to do but for the other browsers I want the @font-face part to work.

Here's what I have used:

  @font-face {
  font-family: "Handwriter";
  src: url("/folder/Font-Regular.otf");
  }

And then I also tried:

 @font-face {
 font-family: "Handwriter";
 src: url("http://www.domain.com/folder/Font-Regular.otf");
 }

Using either of these will render it properly in Chrome and Safari but not in Firefox. The funny thing is that if I use Firebug and go to the CSS file and rewrite the name again then it renders it. In addition, the font file is on my server and I am rending this on the same domain. So not sure what is going wrong here.

Answer 1

try this (with your custom fonts). Remember the format is important:

@font-face {
  font-family: 'WebFont';
  src: url('myfont.woff') format('woff'),  /* Firefox 3.6+, IE9+, Chrome 6+, Safari 5.1+*/
       url('myfont.ttf') format('truetype');  /* Safari 3—5, Chrome4+, Firefox 3.5, Opera 10+ */
}

source: css3please

Answer 2

It's not an advertisement :D

I succefully use http://www.fontsquirrel.com/fontface generator :) If You have z ttf file the rest is a piece of cake :)