CSS @font-face not working with Firefox, but working with Chrome and IE

Question

The following code works in Google Chrome beta as well as IE 7. However, Firefox seems to have a problem with this. I\'m suspecting it to be a problem of how my CSS files ar

Answer 1

I was having the same problem getting a font to display properly in Firefox. Here is what I found to work for me. Add a slash before the directory holding the font in the url attribute. Here is my before and after versions:

B E F O R E:
   @font-face
{   font-family: "GrilledCheese BTN";
    src: url(fonts/grilcb__.ttf);
}

A F T E R:
@font-face
{   font-family: "GrilledCheese BTN";
    src: url(/fonts/grilcb__.ttf);
}

notice the leading slash before 'fonts' in the url? This tells the browser to start at the root directory and then access the resource. At least for me - Problem Solved.