Join the AMA (Ask Me Anything) with the Firefox leadership team to celebrate Firefox 20th anniversary and discuss Firefox’s future on Mozilla Connect. Mark your calendar on Thursday, November 14, 18:00 - 20:00 UTC!

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

@font-face cannot work in the Firefox but work on other browsers.

  • 5 ŋuɖoɖowo
  • 19 masɔmasɔ sia le wosi
  • 1 view
  • Nuɖoɖo mlɔetɔ LittPi

more options

I have made a website and it is using some custom font that requires @font-face for styling. I have used Internet Explorer, Firefox and Chrome to check if the CSS script is functioning and I have found that it is functioning well, except Firefox.

I have tried to find any resources or issues about it but it seems difficult. Is there any web programmers who know about this issue?

The following is the code:

@font-face { font-family: Yesteryear; src: url("font/Yesteryear-Regular.woff"); }

I have made a website and it is using some custom font that requires @font-face for styling. I have used Internet Explorer, Firefox and Chrome to check if the CSS script is functioning and I have found that it is functioning well, except Firefox. I have tried to find any resources or issues about it but it seems difficult. Is there any web programmers who know about this issue? The following is the code: @font-face { font-family: Yesteryear; src: url("font/Yesteryear-Regular.woff"); }

Ŋuɖoɖo si wotia

To all people who have helped me in this topic, thanks so much. I have found what is the problem is... Actually the Firefox does not support the EOT file type and make the whole @font-face destructed. I have removed it and only putting WOFF file in the CSS and it works now.

Thanks so much.

Xle ŋuɖoɖo sia le goya me 👍 2

All Replies (5)

more options

Hello,

This code are in a external file or inner the html page?

Try use simple ' instead a double " . Also try put the font file in same directory of the page.

The sintax of the call is correct, maybe another part of the code is wrong, missing some ;,etc...

more options

Do you see any errors about downloading this font in the Browser Console (Firefox/Tools > Web Developer)?

more options

Diego: It is an external CSS file and I have tried to put the font in the same directory but it is still not working. Also I have used the W3C CSS validator to check but nothing found.

cor-el: I have checked the web console and have just found an error for applying EOT file, which is used on IE. In fact, I have applied WOFF, TTF and EOT files.

For the error got: downloadable font: invalid version tag (font-family: "Yesteryear" style:normal weight:normal stretch:normal src index:0) source: http://littpi.net/font/Yesteryear-Regular.eot style.css

downloadable font: rejected by sanitizer (font-family: "Yesteryear" style:normal weight:normal stretch:normal src index:0) source: http://littpi.net/font/Yesteryear-Regular.eot

more options
more options

Ɖɔɖɔɖo si wotia

To all people who have helped me in this topic, thanks so much. I have found what is the problem is... Actually the Firefox does not support the EOT file type and make the whole @font-face destructed. I have removed it and only putting WOFF file in the CSS and it works now.

Thanks so much.