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

Perhaps your problem is a naming-issue, specifically with regard the use (or not) of spaces and hyphens.

I was having similair issue, which i thought i had fixed by placing the optional quotes (') around font-/family-names, but that actually implicitly fixed a naming issue.

I'm not completely up-to-date on the CSS-specification, and there is (at leat to me) some ambiguity in how different clients interpret the specs. Additionally, it also seems related to PostScript naming conventions, but please correct me if i'm wrong!

Anyway as i understand it now, your declaration is using a mixture of two possible distinct flavors.

@font-face {
  font-family: "DroidSerif Regular";

If you'd consider Droid the actual family-name, of which Sans and Serif are members, just like for instance their children Sans Regular or Serif Bold, then you either use spaces everyhere to concatinate identifiers, OR you remove spaces and use CamelCasing for the familyName, and hyphens for sub-identifiers.

Applied to your declaration, it would look something like this:

@font-face {
  font-family: "Droid Serif Regular";

OR

@font-face {
  font-family: DroidSerif-Regular;

I think both should be perfectly legal, either with or without the quotes, but i've had mixed success with that between various clients. Maybe, one day, i have some time to figure-out the details on this/these isseu/s.

I found this article helpful in understanding some of the aspects involved: http://mathiasbynens.be/notes/unquoted-font-family

This article has some more details on PostScript specifically, and some links to an Adobe specification PDF: http://rachaelmoore.name/posts/design/css/find-font-name-css-family-stack/