Some icons are disappearing in websites
hi, whoever reads this. I've noticed a problem recently in some websites where certain elements (e.g. logos and icons) completely disappear and get replaced by strings of text, which I'm assuming is the code that is used to create them. Usually, it's just one icon, typically a search or menu icon, but there have been more drastic cases, such as the screenshot of the Encyclopaedia Britannica website that I attached. Notice that many buttons, while still functional, are covered with strange text. One thing I'm suspecting is that I intentionally or inadvertently disabled an element (or something of that sort, sorry for my ignorance in the specificities) ages ago that was supposed to make these work, but I don't remember what I disabled, if I ever did. But other than that, I have no clue what causes this. In Tor, where I don't have an account and never interfered with the setup or settings, everything seems to work just fine; the buttons are right there. Hope someone can be of help.
All Replies (6)
Not seeing the issue in Windows 10. It would help move things along faster if you provide a link to the site and the version of Mac you are using? I have a Macbook Pro from 2012. Let me what I get on it. Standby...
Modified by jonzn4SUSE
Type about:preferences#general<enter> in the address bar. Across from fonts and colors, press the Advanced button. On the bottom, turn on Allow Web Sites To Choose Their Own.
Make sure you haven't enabled a High Contrast theme in the OS settings.
Special icons are usually supplied by an icon font that is downloaded from the server via @font-face CSS rules.
You can check gfx.downloadable_fonts.enabled on the about:config page and make sure it is set to true (if necessary double-click the line to toggle its value to true). Also make sure you allow pages to choose their own fonts.
- Options/Preferences -> General: Fonts & Colors -> Advanced
[X] "Allow pages to choose their own fonts, instead of my selections above"
If you use uBlock Origin make sure not to "block remote fonts".
If the problem hasn't been resolved by other suggestions, I have my checklist in this other thread:
cor-el said
Special icons are usually supplied by an icon font that is downloaded from the server via @font-face CSS rules. You can check gfx.downloadable_fonts.enabled on the about:config page and make sure it is set to true (if necessary double-click the line to toggle its value to true). Also make sure you allow pages to choose their own fonts.If you use uBlock Origin make sure not to "block remote fonts".
- Options/Preferences -> General: Fonts & Colors -> Advanced
[X] "Allow pages to choose their own fonts, instead of my selections above"
Thanks, I did the "allow pages to choose fonts ..." suggestion and it did work, but I had that setting toggled off long ago because I wanted all websites to appear with one font. Wonder if there is any way I can have my cake and eat it?
Disabling website fonts this way in Firefox disables icon fonts that are uses quite often these days although font in the PUA codepoints (E000-F8FF) should work.
You can possibly use code in userContent.css to override the font-family and possibly the font color (a lot of websites have a grayish color that I don't really like). On this website I use a monospace font for displaying the replies.
See also:
- https://www.userchrome.org/what-is-userchrome-css.html
- https://www.userchrome.org/how-create-userchrome-css.html
In Firefox 69 and later you need to set this pref to true on the about:config page to enable userChrome.css and userContent.css in the chrome folder.
- toolkit.legacyUserProfileCustomizations.stylesheets = true
See:
