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

One easy solution that no one's mentioned yet is embedding the font directly into the css file using base64 encoding.

If you're using fontsquirrel.com, in the font-face Kit Generator choose expert mode, scroll down and select Base64 Encode under CSS Options - the downloaded Font-Kit will be ready to plug and play.

This also has the fringe benefit of reducing page load time because it requires one less http request.

Answer 2

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/

Answer 3

If you are trying to import external fonts you face one of the most common problem with your Firefox and other browser. Some time your font working well in google Chrome or one of the other browser but not in every browser.

There have lots of reason for this type of error one of the biggest reason behind this problem is previous per-defined font. You need to add !important keyword after end of your each line of CSS code as below:

Example:

@font-face
{
    font-family:"Hacen Saudi Arabia" !important;
    src:url("../font/Hacen_Saudi_Arabia.eot?") format("eot") !important;
    src:url("../font/Hacen_Saudi_Arabia.woff") format("woff") !important;
    src: url("../font/Hacen_Saudi_Arabia.ttf") format("truetype") !important;
    src:url("../font/Hacen_Saudi_Arabia.svg#HacenSaudiArabia") format("svg") !important;
}
.sample
{
    font-family:"Hacen Saudi Arabia" !important;
}

Description: Enter above code in your CSS file or code here. In above example replace "Hacen Saudi Arabia" with your font-family and replace url as per your font directory.

If you enter !important in your css code browser automatically focus on this section and override previously used property. For More details visit: https://answerdone.blogspot.com/2017/06/font-face-not-working-solution.html

Answer 4

I had exactly this problem running ff4 on a mac. I had a local development server running and my @font-face declaration worked fine. I migrated to live and FF would 'flash' the correct type on first page load, but when navigating deeper the typeface defaulted to the browser stylesheet.

I found the solution lay in adding the following declaration to .htaccess

<FilesMatch "\.(ttf|otf|eot)$">
    <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

found via

Answer 5

Could also be the use of the URL in the path of the font-face tag. If you use "http://domain.com" it doesn't work in Firefox, for me changing it to "http://www.domain.com" worked.

Answer 6

Try nerfing the local source declaration in your @font-face directives.

There's a known bug in either Firefox or the Google Font API that prevents the variants of fonts to be used if the font is installed locally, and matches the defined local name:

http://code.google.com/p/googlefontdirectory/issues/detail?id=13

To effectively nerf the local declaration, just make your local source string some nonsense. The generally accepted convention for this is to use a the smiley unicode character ("☺"). Why? Paul Irish has a great explanation up on his blog:

http://paulirish.com/2010/font-face-gotchas/#smiley