CSS @font-face not working with Firefox, but worki

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 are included, cause I know Firefox is not too friendly about cross-domain imports.

But this is all just static HTML and there's no question of cross-domain.

On my landing-page.html I do a CSS import like so:

<link rel="stylesheet" href="../css/main.css" type="text/css" media="screen, projection" />

Within the main.css I have another imports like so:

@import url("reset.css");
@import url("style.css");
@import url("type.css");

and within the type.css I have the following declarations:

@font-face {
    font-family: "DroidSerif Regular";
        src: url("font/droidserif-regular-webfont.eot");
        src: local("DroidSerif Regular"), 
                url("font/droidserif-regular-webfont.woff") format("woff"), 
                url("font/droidserif-regular-webfont.ttf")     format("truetype"), 
                url("font/droidserif-regular-webfont.svg#webfontpB9xBi8Q")     format("svg"); 
    font-weight: normal; font-style: normal; }
@font-face {
    font-family: "DroidSerif Bold";
    src: url("font/droidserif-bold-webfont.eot");
    src: local("DroidSerif Bold"), 
        url("font/droidserif-bold-webfont.woff") format("woff"), 
        url("font/droidserif-bold-webfont.ttf") format("truetype"), 
        url("font/droidserif-bold-webfont.svg#webfontpB9xBi8Q") format("svg");
    font-weight: normal; font-style: normal; }

body { font-family: "DroidSerif Regular", serif; }
h1 { font-weight: bold; font-family: "DroidSerif Bold", serif; }

I have a directory called "font" in the same location as type.css. This font directory contains all the woff/ttf/svg files etc.

I'm stumped on this one. It works in Chrome and IE but not on Firefox. How is this possible? What am I missing?

Answer 1

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

Answer 2

I had a similar problem. The fontsquirel demo page was working in FF but not my own page even though all files were coming from the same domain!

It turned out that I was linking my stylesheet with an absolute URL (http://example.com/style.css) so FF thought it was coming from a different domain. Changing my stylesheet link href to /style.css instead fixed things for me.

Answer 3

In my case, I sloved problem with inserting font-face style code

<style type="text/css">
@font-face { 
font-family: 'Amazone';font-style: normal; 
/*font-weight:100; -webkit-font-smoothing: antialiased; font-smooth:always;*/ 
src: local('Amazone'), url(font/Amazone.woff) format('woff');} 
</style>

direclty in header on your index.html or php page, in style tag. Works for me!

Answer 4

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 5

Try this....

http://geoff.evason.name/2010/05/03/cross-domain-workaround-for-font-face-and-firefox/

Answer 6

My problem was that Windows named the font 'font.TTF' and firefox expected 'font.ttf' i saw that after opening my project in linux, renamed the font to propper name and everything works