搜尋 Mozilla 技術支援網站

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

了解更多

FontAwesome Webfont loading but not displaying

  • 5 回覆
  • 55 有這個問題
  • 1 次檢視
  • 最近回覆由 cmscss

more options

Hi There,

I'm trying to load FontAwesome locally (using MAMP) like this in the head:

<link href="/assets/css/fonts.css" rel="stylesheet" type="text/css">

And fonts.css contains the following (Font Squirrel syntax):

@font-face {

 font-family: 'FontAwesome';
 src: url('/assets/fonts/fontawesome-webfont.eot');
 src: url('/assets/fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
      url('/assets/fonts/fontawesome-webfont.woff') format('woff'),
      url('/assets/fonts/fontawesome-webfont.ttf') format('truetype'),
      url('/assets/fonts/fontawesome-webfont.svg#fontawesomeregular') format('svg');
 font-weight: normal;
 font-style: normal;

}


If I inspect an element and click "Fonts" I can confirm that Firefox is actually loading the font - it's just not displaying it (all I see are the unicode characters).

I've tried:

- Disabling all add-ons

- Hard resetting Firefox

- Implementing the .htaccess suggestion

But the font displays in Safari and not in Firefox - I'm totally stumped. The weird thing is that another custom font works in Firefox and if I load FontAwesome from the CDN it works.

I've literally copied the FontAwesome css file from the CDN so I know the class names are correct (plus the FontAwesome classes are being applied) it's just that Firefox won't display the unicode character using the font.

I'm testing the fonts locally first before I create a fallback incase the CDN goes down.

Any pointers in the right direction would be much appreciated.

Cheers

BTW, is there a way to format posts better (code blocks and unordered lists etc)?

Hi There, I'm trying to load FontAwesome locally (using MAMP) like this in the head: <pre> <link href="/assets/css/fonts.css" rel="stylesheet" type="text/css"> </pre> And fonts.css contains the following (Font Squirrel syntax): @font-face { font-family: 'FontAwesome'; src: url('/assets/fonts/fontawesome-webfont.eot'); src: url('/assets/fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), url('/assets/fonts/fontawesome-webfont.woff') format('woff'), url('/assets/fonts/fontawesome-webfont.ttf') format('truetype'), url('/assets/fonts/fontawesome-webfont.svg#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; } If I inspect an element and click "Fonts" I can confirm that Firefox is actually loading the font - it's just not displaying it (all I see are the unicode characters). I've tried: - Disabling all add-ons - Hard resetting Firefox - Implementing the .htaccess suggestion But the font displays in Safari and not in Firefox - I'm totally stumped. The weird thing is that another custom font works in Firefox and if I load FontAwesome from the CDN it works. I've literally copied the FontAwesome css file from the CDN so I know the class names are correct (plus the FontAwesome classes are being applied) it's just that Firefox won't display the unicode character using the font. I'm testing the fonts locally first before I create a fallback incase the CDN goes down. Any pointers in the right direction would be much appreciated. Cheers BTW, is there a way to format posts better (code blocks and unordered lists etc)?

由 cmscss 於 修改

被選擇的解決方法

Thanks guys,

I've just figured out the issue, I'd copied the FontAwesome source from the CDN file that loads in Safari.

I've since downloaded the source from their website and now Firefox works - not sure what was missing but maybe they serve slightly different versions depending on the browser.

Thanks for all the replies and sorry for wasting your time - you guys are a very helpful community.

Cheers

Ben

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

所有回覆 (5)

more options

You need to add a local rule if you want Firefox to use the font when installed on the computer.

@font-face { font-family: 'FontAwesome'; src: local(''FontAwesome'); }
more options

@cor-el: Thanks heaps for the reply but I'm confused sorry.

Isn't the local rule to specify a font installed on the user's OS? Everything I've read (including the recommended Font Squirrel syntax) suggests not doing this to force the browser to use the correct font - i.e. the font on the web server.

Actually, I now see that my post is confusing - when I say local, I mean local to the server and not a CDN.

Does that make sense?

由 cmscss 於 修改

more options

Yes, that makes a difference.
Maybe check the Browser Console (Firefox/Tools > Web Developer;Ctrl+Shift+J) for possible security errors with downloading the font.
Also make sure to use a relative path to the font file.
Otherwise you would have to send HTTP Access Control headers.

more options

Can you provide a link to a page demonstrating this problem?


Users encountering this problem on sites like Yahoo mail and Github often have set Firefox to override site fonts in the Options/Preferences dialog:

(Mac) Firefox menu > Preferences > Content > "Advanced" button
(Win) orange Firefox button (or Tools menu) > Options > Content > "Advanced" button

Clearing the checkbox for "Allow pages to choose their own fonts" will typically yield the tall rectangle with the two rows of two characters each shown in your screen shot.

That might not apply to you, but keep that in mind for any support questions you might get about "images not loading" which is a common way people describe the missing icons.

more options

選擇的解決方法

Thanks guys,

I've just figured out the issue, I'd copied the FontAwesome source from the CDN file that loads in Safari.

I've since downloaded the source from their website and now Firefox works - not sure what was missing but maybe they serve slightly different versions depending on the browser.

Thanks for all the replies and sorry for wasting your time - you guys are a very helpful community.

Cheers

Ben