@font-face isn't working in Firefox 3.5?

Question

I have an OpenType font being referenced in a CSS file, but it doesn't seem to work in Firefox 3.5. It works perfectly in Safari. The font is being referenced relatively, and is hosted on the same server, but in another sub-directory:

@font-face { font-family:'Font Name'; src:url(../fonts/Font-Name.otf) format('opentype') }

Has anyone else had any issues with @font-face with FF3.5?

Answer 1

I'm not entirely sure which of these changes fixed the problem, but this is what the line looked like when the problem was fixed:

@font-face { font-family:"FontName"; src:url("../fonts/Font-Name.otf") format("opentype"); }

Answer 2

Oh!!! The url of your fonts must be quoted with doublequote --> ""

Single quote ('') cannot work for Firefox. It works for Chrome though.

Answer 3

https://developer.mozilla.org/index.php?title=En/CSS/%40font-face

I don't see a format() param.

Answer 4

I think the issue is with the single quotes on the values. Use double quotes.

Answer 5

I had a similar problem with FireFox 5 which turned out to be because I was loading the site locally from file e.g.file:///. As soon as I put the site on a web server running on my local machine e.g. http://localhost:8080, it worked.

Note that Chrome worked fine when loading from file and I was specifying a relative path as per the accepted answer above.

Answer 6

Use Font Squirrels service. It gives your bulletproof code & gives you consistent results. Try

Answer 7

I had the same problem. NO QUOTES fixed it- single or double quotes would not work with FF. No quotes also worked with chrome - I didn't bother trying IE b/c it used a different file.