Why do I often see missing characters in FFox?

[pixeldroid 27 Likes (Newbie)]

My apologies for being a bit off topic...

On my computer it is very common to see a replacement icon rather than font symbols in FFox.  Attached are examples from Codepen and SitePoint. The symbols on both these pages display properly in Chrome and IE.  I can't be the only person who has this experience - it probably happens to many of our clients.

Any ideas what causes it and how to avoid?

Thanks.

[Carl 9,066 Likes (Superhero)]

Not really sure about that. Don't use FireFox enough to notice that day to day.

Perhaps one of our community experts has some ideas and can help further.

 

I would suggest writing a little note to the CodePen guys. Those guys are experts on this stuff and its been my experience that their support team is excellent at answering questions.

 

http://codepen.io/support/

[Jonathan 5,176 Likes (Superhero)]

Hello pixeldroid

 

Im on PC Windows 7 (64-bit) and see the font icons. 

• What OS are you seeing this on?
• What version of Firefox do you see this on?
• I see them, so have you tried clearing your cache?
• If you look in the console and inspector do you see the missing font icon point to a file that does not exist?
• Where there errors in the console when you saw these missing font icons?
• What was the exact URL you saw this on?

It also could be that the Devs on codepen were just in the middle of uploading their changes. But like Carl said.. Try  contacting their great support team.. they welcome any issues you bring to their attention!

 

[pixeldroid 27 Likes (Newbie)]

FF 28.0, Win7 Pro x64

Codepen is actually working today.  I've been out of town for 6 weeks and didn't check it before posting.  Probably FF or CodePen adjusted something.
However, the star icons on this SitePoint page, http://www.sitepoint.com/store/the-ultimate-css-reference/, don't work (see pic above).  The volunteer icon on this orphanage page (and others in the same row), http://indianorphanage.com don't display correctly.  Both work in Chrome.

I see this so commonly that I think of it as normal.

When I inspect one of the stars ("icon-star") on the sitepoint page, both FF and Chrome show a number of CSS properties which have a strikethrough but the stars do display correctly in Chrome.  Same occurs for the 'volunteer' icon on the orphanage page.

When I load http://indianorphanage.com in FF, I get these console errors:
Use of getUserData() or setUserData() is deprecated.
                  Use WeakMap or element.dataset instead. requestNotifier.js:64
ReferenceError: jQuery is not defined
                  jquery.themepunch.plugins.min.js:51
ReferenceError: jQuery is not defined
                  jquery.themepunch.revolution.min.js:10
Use of getUserData() or setUserData() is deprecated.
                  Use WeakMap or element.dataset instead. requestNotifier.js:64
Use of getUserData() or setUserData() is deprecated.
                  Use WeakMap or element.dataset instead. requestNotifier.js:64

Same page in the Google Console:
Uncaught ReferenceError: jQuery is not defined
                  jquery.themepunch.plugins.min.js?rev=4.1.4&ver=3.9:51
Uncaught ReferenceError:
                  jQuery is not defined jquery.themepunch.revolution.min.js?rev=4.1.4&ver=3.9:10
Resource interpreted as Font but transferred with MIME type x-font/woff:
                  "
event.returnValue is deprecated.
                  Please use the standard event.preventDefault() instead. www-embed-player-vflWfXjsU.js:29

Thanks.

 

[Jonathan 5,176 Likes (Superhero)]

That's weird because i see the font icons (review stars) on that sitepoint page too..  I do get this console error though:

TypeError: container.offset(...) is undefined
http://www.sitepoint.com/wp-content/themes/sitepoint/assets/javascripts/scripts-foot-c8a0ec73e59e2ffba7cd12638f61110f.js?ver=3.8.1
Line 7

Do you have any scripts blocking add-ons in Firefox that might be blocking scripts or assets?

 

I know this is a stupid question.. but have you deleted your cache?

 

[pixeldroid 27 Likes (Newbie)]

Actually, that is not a stupid question - I hadn't done that.  However, it didn't help.  Further, I ran FF in safe-mode and that didn't fix it either.  Maybe I am the only guy in the world with this problem...

[pixeldroid 27 Likes (Newbie)]

Found the answer on the Mozilla forums:

Edit menu > Preferences > Content

In the Fonts & Colors section, click Advanced

Check the box for "Allow pages to choose their own fonts" and OK out. Reload, and the icons should appear.

 

Thanks for the suggestions!

[Jonathan 5,176 Likes (Superhero)]

Firefox has that checked by default in fresh installs.. also i had that option already checked in Firefox.

 

Found here:

 

Tools -> Options  -> Content -> Fonts & Colors -> Advanced -> Allow pages to choose their own fonts (checked)

 

But if you have the File bar unchecked then you would do this instead:

 

Firefox (orange button top left corner)  -> Options  -> Content -> Fonts & Colors -> Advanced -> Allow pages to choose their own fonts (checked)

 

Glad you got it figured out!

[pixeldroid 27 Likes (Newbie)]

Me too.   Its been bugging me for over a year!

[Carl 9,066 Likes (Superhero)]

Perhaps this article will clear things up, and certainly explain some issues on codepen recently: http://css-tricks.com/icon-fonts-vs-svg/