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 replies
  • 19 have this problem
  • 1 view
  • Last reply by 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"); }

Chosen solution

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.

Read this answer in context 👍 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

Chosen Solution

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.