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 had exactly the same problem. I had to create a new folder called "fonts" and put it in wp_content. I can access it from my browser like this http://www.example.com/wp-content/fonts/CANDY.otf

Previously, the fonts folder was in the same directory as my CSS file, and the @font-face looked like this:

@font-face { 
    font-family: CANDY;
    src: url("fonts/CANDY.otf");
}

As i mentioned above, this was not working in Firefox but only with Chrome. Now it is working because I used an absolute path:

@font-face { 
    font-family: CANDY;
    src: url("http://www.example.com/wp-content/fonts/CANDY.otf");
}