Twitter, tumblr, yahoo icon fonts don't display in Firefox
"Icons" rendered in a custom font for common sites like twitter, tumblr, yahoo and github don't display correctly in Firefox unless the "let websites choose their own fonts" options is selected. A weird glyph or a box with numbers displays instead, making the site ugly and unusable. Firefox has no override or "whitelist" for individual websites in the font options.
All Replies (3)
Those icons are actually a font that is downloaded from the server as you can see by the little boxes with the hex code of the character.
Make sure that you allow pages to choose their own fonts.
- Edit > Preferences > Content : Fonts & Colors > Advanced: [X] "Allow pages to choose their own fonts, instead of my selections above"
You can check the gfx.downloadable_fonts.enabled pref on the about:config page and reset user set (bold) gfx.downloadable_fonts.enabled prefs via the right-click context menu to the default value to make sure that you allow fonts to be downloaded.
Modified by cor-el
I don't really want pages to use their own fonts 'cause it can get pretty ugly. gfx.downloadable_fonts was already set to enable, and made no difference either way.
I partially solved the problem on twitter by moving the /etc/fonts/conf.avail/65-nonlatin.conf file (Mint linux), but now for example instead of the blue twitter bird symbol in the middle of the twitter header, there's a blue Apple icon, instead of what I presume to be a "home" icon there's a "rewind" symbol, etc. Tumblr and yahoo didn't change.
I'll keep trying to mess with the Mint font settings to see if I can fix it properly. Maybe from some of the info I've provided someone with more knowledge about this issue can isolate the problem better. The fonts being requested on the twitter page were "Khmer OS" and "FontAwesome," btw, the ones on yahoo are "OpenSystem," and the ones on tumblr aren't showing up in the page info box anymore and I don't remember what they were. So it looks like this is a really messy problem that's only going to get worse as more and more sites start using their own fonts for icons & firefox refuses to download them.
All these sites work perfectly in Chrome, btw. I guess I'll just use a font-override extension in FF until I hope it's fixed! It would be nice to be able to whitelist pages/domains to use their own fonts from within FF, though.
The only way to make this work is to allow pages to use their own fonts.
A locally installed font can only work if there is a local rule in the @font-face rule present.
You can use Stylish or code in userContent.css to overcome issues with fonts on specific pages.
See these for some examples of icon fonts: