FontAwesome Webfont loading but not displaying
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)?
由 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)
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'); }
@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 於 修改
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.
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.
選擇的解決方法
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