Where did you install Firefox from? Help Mozilla uncover 3rd party websites that offer problematic Firefox installation by taking part in our campaign. There will be swag, and you'll be featured in our blog if you manage to report at least 10 valid reports!

Avatar for Username

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

Lolu chungechunge lwabekwa kunqolobane. Uyacelwa ubuze umbuzo omusha uma udinga usizo.

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

  • 5 uphendule
  • 19 zinale nkinga
  • 1 view
  • Igcine ukuphendulwa ngu LittPi

LittPi
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"); }

Isisombululo esikhethiwe

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.

Funda le mpendulo ngokuhambisana nalesi sihloko 👍 2

All Replies (5)

Diego Victor
Diego Victor
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...

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
more options

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

LittPi
LittPi Umnikazi wombuzo
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

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
more options

You can try to check the font.

LittPi
LittPi Umnikazi wombuzo
more options

Isisombululo Esikhethiwe

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.