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

FontAwesome Webfont loading but not displaying

  • 5 replies
  • 55 have this problem
  • 1 view
  • Last reply by 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)?

Modified by cmscss

Chosen solution

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

Read this answer in context 👍 0

All Replies (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?

Modified by 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

Chosen Solution

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