搜尋 Mozilla 技術支援網站

防止技術支援詐騙。我們絕對不會要求您撥打電話或發送簡訊,或是提供個人資訊。請用「回報濫用」功能回報可疑的行為。

了解更多

@font-face not working in FF, but working elsewhere.

  • 4 回覆
  • 4 有這個問題
  • 1 次檢視
  • 最近回覆由 DCV_

more options

Hey, I've been trying to get @font-face working in Firefox, but it just won't work. I'm hosting the font externally and the way I'm doing it works on other browsers. This is my code:


<body bgcolor="CA2E28" style="margin-left: 0px; margin-right: 0px;"> <style type="text/css" media="screen, print"> @font-face { font-family: "Blackout"; src: url(woff link is here, don't want to put it here though.); } body { font-family: "Blackout" } </style>

<center>THIS SHOULD BE BLACKOUT.</center>

</body>

Hey, I've been trying to get @font-face working in Firefox, but it just won't work. I'm hosting the font externally and the way I'm doing it works on other browsers. This is my code: <body bgcolor="CA2E28" style="margin-left: 0px; margin-right: 0px;"> <style type="text/css" media="screen, print"> @font-face { font-family: "Blackout"; src: url(woff link is here, don't want to put it here though.); } body { font-family: "Blackout" } </style> <center>THIS SHOULD BE BLACKOUT.</center> </body>

由 DCV_ 於 修改

被選擇的解決方法

Can you check to see whether Firefox is downloading the file? To do that, first open the Web Console in the lower part of the tab below your page using either:

  • Ctrl+Shift+k
  • "3-bar" menu button > Developer > Web Console
  • (menu bar) Tools > Web Developer > Web Console

Click the "Network" button/tab along the top of the console and reload the page. Here you can see whether Firefox is requesting the file and, if so, whether it is retrieved.

If that checks out, then click the Console tab and reload the page and watch for any error messages that might relate to the font. Anything strange?

If the font is downloading and there are no error messages, use the Inspector tab to look at the body element and see whether the style is there and is being given effect (i.e., no line-through).

If all that is good, you might double-check your personal settings to make sure you aren't overriding website fonts. Either:

  • "3-bar" menu button (or Edit menu) > Preferences > Content

Click the Advanced button and make sure you have a checkmark for "Allow pages to choose their own fonts".

If all of that is good, then... it's a mystery. Have you checked Firefox on other machines or other operating systems?

For reference: https://developer.mozilla.org/docs/Web/CSS/@font-face

從原來的回覆中察看解決方案 👍 1

所有回覆 (4)

more options

選擇的解決方法

Can you check to see whether Firefox is downloading the file? To do that, first open the Web Console in the lower part of the tab below your page using either:

  • Ctrl+Shift+k
  • "3-bar" menu button > Developer > Web Console
  • (menu bar) Tools > Web Developer > Web Console

Click the "Network" button/tab along the top of the console and reload the page. Here you can see whether Firefox is requesting the file and, if so, whether it is retrieved.

If that checks out, then click the Console tab and reload the page and watch for any error messages that might relate to the font. Anything strange?

If the font is downloading and there are no error messages, use the Inspector tab to look at the body element and see whether the style is there and is being given effect (i.e., no line-through).

If all that is good, you might double-check your personal settings to make sure you aren't overriding website fonts. Either:

  • "3-bar" menu button (or Edit menu) > Preferences > Content

Click the Advanced button and make sure you have a checkmark for "Allow pages to choose their own fonts".

If all of that is good, then... it's a mystery. Have you checked Firefox on other machines or other operating systems?

For reference: https://developer.mozilla.org/docs/Web/CSS/@font-face

more options

jscher2000 said

Can you check to see whether Firefox is downloading the file? To do that, first open the Web Console in the lower part of the tab below your page using either:
  • Ctrl+Shift+k
  • "3-bar" menu button > Developer > Web Console
  • (menu bar) Tools > Web Developer > Web Console
Click the "Network" button/tab along the top of the console and reload the page. Here you can see whether Firefox is requesting the file and, if so, whether it is retrieved. If that checks out, then click the Console tab and reload the page and watch for any error messages that might relate to the font. Anything strange? If the font is downloading and there are no error messages, use the Inspector tab to look at the body element and see whether the style is there and is being given effect (i.e., no line-through). If all that is good, you might double-check your personal settings to make sure you aren't overriding website fonts. Either:
  • "3-bar" menu button (or Edit menu) > Preferences > Content
Click the Advanced button and make sure you have a checkmark for "Allow pages to choose their own fonts". If all of that is good, then... it's a mystery. Have you checked Firefox on other machines or other operating systems? For reference: https://developer.mozilla.org/docs/Web/CSS/@font-face

This message came upon refreshing: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at <my font like here>. This can be fixed by moving the resource to the same domain or enabling CORS. Blackout_Midnight-webfont.woff

And this one soon after: downloadable font: download failed (font-family: "Blackout" style:normal weight:normal stretch:normal src index:0): bad URI or cross-site access not allowed source: <my font link here>

more options

This is getting a little complicated. Here are some MDN articles that may help, but you might also search specific solutions for font files.

more options

jscher2000 said

This is getting a little complicated. Here are some MDN articles that may help, but you might also search specific solutions for font files.

I found the error and fixed it. Thank you for pointing out the console to me! :D