@font-face cannot work in the Firefox but work on other browsers.
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 👍 2All Replies (5)
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...
Do you see any errors about downloading this font in the Browser Console (Firefox/Tools > Web Developer)?
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
You can try to check the font.
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.