Overwritten text / click not possible
With many websites I am experiencing overwritten text on page to the point that often it is not possible to read what is there or click accordingly - see sample image below. Already reduced security level to 'basic', but that does not solve problem. Is it just a setting? On Chrome all these websites work fine but I still prefer to use Firefox.
Windows 10 x64
Help appreciated.
All Replies (2)
That site uses an interesting technique for inserting little icons to the left of text: it insert the phrase "keyboard_arrow_right" and applies a font called Material Icons that magically turns that text into an icon. If the font is missing or blocked, the browser uses the default font, which leads to the mess you see. I am attaching two screenshots of Firefox's Page Inspector tool for comparison.
So why might the Material Icons font not be loading? There are many possible reasons, but here are some common things to check, the details follow:
(1) Font setting -- are pages allowed to specify fonts to use? (2) Is an add-on or preference blocking downloadable fonts?
For #1, go to the Options page:
- Windows: "3-bar" menu button (or Tools menu) > Options
- Mac: "3-bar" menu button (or Firefox menu) > Preferences
- Linux: "3-bar" menu button (or Edit menu) > Preferences
- Any system: type or paste about:preferences into the address bar and press Enter/Return to load it
Scroll down to the "Fonts & Colors" section and click the "Advanced" button.
Then make sure the box is checked for "Allow pages to choose their own fonts, instead of your selections above":
Any difference (you would need to reload the problem page, Ctrl+r or the circling arrow button, to see any difference)?
For #2:
Add-ons
Some add-ons have a feature to globally block downloadable fonts unless you specially allow them. Do you run uBlock Origin or NoScript, for example? In uBlock Origin, the setting is called "Block remote fonts".
No Downloadable Fonts Preference
There's a general setting to block downloadable fonts in about:config, if you think you might ever have changed that:
(1) In a new tab, type or paste about:config in the address bar and press Enter/Return. Click the button accepting the risk.
(2) In the search box above the list, type or paste gfx.down and pause while the list is filtered
(3) If the gfx.downloadable_fonts.enabled preference has a value of false, double-click it to restore the default value of true
Was it any of those things?
If you use uBlock Origin make sure not to "block remote fonts".