How to restore broken icons with individual fonts enabled?
With disabled "Allow pages to choose their own fonts, instead of your selections above" (https://support.mozilla.org/en-US/kb/change-fonts-and-colors-websites-use#w_custom-fonts) icons on sites like Google News (https://news.google.com) are broken, as shown here: https://i.imgur.com/p7wlCPn.png
Enabling this setting brings them back again: https://i.imgur.com/Vw4W2HY.png
But how can I have properly rendered icons with individual fonts enabled, read, with disabled "Allow pages to choose their own fonts, instead of your selections above"?
I'm using FF 60.0.1 on Ubuntu 17.10.
Thanks in advance!
Alle antwoorden (5)
Instead of using images for icons (which was the common practice in the past), many sites now use a custom font to display icons. This means that the website has to have the ability to load it's own fonts or else you won't be able to view the icons properly.
What you want is probably not possible. When you disable website fonts then Firefox won't be able to use an icon font that must be downloaded. Such icon fonts probably won't work when installed locally event if you would install this each time you come across such a font. Maybe instead use code in userContent.css to override the font used on web pages.
What specific reason do you have to disable website fonts knowing that this will cause the issues you mentioned?
cor-el said
What specific reason do you have to disable website fonts knowing that this will cause the issues you mentioned?
It's not about disabling website fonts at all, but mainly having one font to ensure a consistent look and feel.
I remember that some years ago I had the same issue with other sites. Luckily a Firefox update resolved it...
If you disable "Allow pages to choose their own fonts, instead of your selections above" then this is the equivalent of disabling website fonts and this includes icon fonts. If you want to enforce a specific font then a better way is using (possibly website specific via @-moz-document domain()) code in userContent.css.
According to this statement, icon fonts actually should load even with disabled website fonts.
Quote: If you want regular fonts to be blocked and icon fonts to be downloaded (default from Firefox 41 on for users who have disabled the fonts preference in the Firefox options):
Set browser.display.use_document_fonts to 0 and gfx.downloadable_fonts.enabled to true
I also checked in the safe mode (where all add-ons are disabled), but still don't see those icons.
Is this a bug or am I misinterpreting something?