Αυτός ο ιστότοπος θα έχει περιορισμένη λειτουργικότητα, όσο εκτελούμε εργασίες συντήρησης για να βελτιώσουμε την εμπειρία σας. Αν ένα άρθρο δεν επιλύει το ζήτημά σας και θέλετε να κάνετε μια ερώτηση, η κοινότητα υποστήριξής μας είναι έτοιμη να σας βοηθήσει στο Twitter (@FirefoxSupport) και στο Reddit (/r/firefox).

Αναζήτηση στην υποστήριξη

Προσοχή στις απάτες! Δεν θα σας ζητήσουμε ποτέ να καλέσετε ή να στείλετε μήνυμα σε κάποιον αριθμό τηλεφώνου ή να μοιραστείτε προσωπικά δεδομένα. Αναφέρετε τυχόν ύποπτη δραστηριότητα μέσω της επιλογής «Αναφορά κατάχρησης».

Μάθετε περισσότερα

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