Texts overlaps on websites!
Hello,
I had this problem mostly on 1 site across multiple Windows installs. But now it happens on multiple sites. Text overlap each other. I Am using Windows 10 Pro 20H2, Firefox Last stable with only UBlock addon.
I tried: even troubleshoot mode didn't help!
- changing/flushing dns didn't help (heard dns could cause that)
Any idea why is this happening. It doesn't look like site issue, since recently it happened multiple times!
All Replies (17)
Hmm, I can't read that, but here's a similar situation that could be the same problem:
I have seen phrases overprinting on a site's normal text when a site is using Google's "Material Icons" font, and for some reason that font is not loading.
Here are some of the reasons the font file might not be loading:
(1) Firefox set to always use your preferred fonts instead of the fonts specified by the page (2) Font downloading ("remote fonts" or "web fonts") blocked in an add-on (like uBlock Origin) (3) Google sites like gstatic.com blocked from being used in non-Google pages (4) Font downloading blocked in about:config
For #1:
Open 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:
For example, uBlock Origin has a default setting to block "remote fonts", as well as site-specific options. https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-remote-fonts
I'm not sure about others, but LocalCDN can cause font issues.
For #3:
If you use add-ons or container tabs to restrict where Google addresses load, you might need to make an exception.
For #4:
You can check here:
(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
(1) firefox was set to allow custom fonts (2) ublock wasn't set to block remote fonts by default - LOL I read even this seemingly harmless change could affect security, or privacy! (3) ublock disabled + disabled Firefox blocking, deleted cache also - didn't help! (4) it is allowed
1# allowed by default 2# "block remote fonts" wasn't checked 3# I use only Ublock in this instance of Firefox, no containers (don't know what that is) 4# gfx.downloadable_fonts.enabled was true
BTW someone said DNS could cause that, it sounds weird, any truth on that?
Okulungisiwe
empleat said
BTW someone said DNS could cause that, it sounds weird, any truth on that?
If it's a web font and the DNS blocks the source site, it's certainly possible. If you check the developer tools panel -- Web Console, Network Monitor -- perhaps you can uncover more information on problems retrieving or using the font file.
If you use uBlock Origin make sure not to "block remote fonts".
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"
Okulungisiwe
There was only 1 error with twitter, doubt that could do anything. I tried even troubleshooting mode - didn't help. Network tool dump: https://imgur.com/a/70u8lyb since I don't know how to troubleshoot erorrs with fonts using this...
Strange thing is changing DNS server didn't work. I used many DNS servers in past also. And now I have like 5.
We should have asked you for the URL before. When I compare between Firefox and Chrome, I see the same behavior: at certain window widths, the menu bar "overflows" over content lower on the page. (see attached screenshots) Possibly the designer did not account for a change that made the menu wider than expected.
https://www.vodafone.cz/gigabit/ Also it happens on steam. It started to happen first to me on steam ever, it did not happen ever before anywhere so far I can recall: https://steamcommunity.com/app/620/discussions/
Okulungisiwe
https://www.vodafone.cz/gigabit/ It also happens on steam, it started to happening on steam for the first time. Weird I browse literally millions of sites and never saw broken text until on steam and since like couple times recently... https://steamcommunity.com/app/620/discussions/
What does the problem look like on Steam?
It happens only in browser, not on the steam, across multiple instalations of Windows and multiple DNS servers, maybe even in Chrome... https://imgur.com/a/d3xQ5Fh
Ooh but in Edge it looks normal now, strange! Cookies allowed except from unvisited websites. LOL when I write text freezes every 5 seconds, I have bugs more often than I can solve them...
Okulungisiwe
It happens only in browser, not on the steam, across multiple instalations of Windows and multiple DNS servers, maybe even in Chrome... https://imgur.com/a/d3xQ5Fh
Ooh but in Edge it looks normal now, strange! Cookies allowed except from unvisited websites. LOL when I write text freezes every 5 seconds, I have bugs more often than I can solve them...
I believe the issue is webpage design. For example, there is an unnecessary gap at the top of the webpage. Another example, the page is not using a CSS grid.
see:
en.wikipedia.org › wiki › CSS_grid_layout
But then how do you explain the steam, it shows properly in edge and not in firefox. It is bugged like this years for me. Plus lately it shows incorrectly on multiple sites!
It is likely that the website designer used Internet Explorer to test the webpage being built.
If the webpage designer would have also tested in FF and other browsers, the flaw would have been noticed.
If i recall, FF has a few issues with some CSS. But renders webpages with perfection when CSS and HTML is used properly. For example, when the CSS grid is used or basic HTML, I have never heard people complain about these webpages.
As I am no longer into webpage-ing, per se., i believe that the Edge creates a shell that encapsulates all webpages, ie controls the layout. But for other browsers, the webpages are free to load without control.
The above paragraph is 100% speculation, as i am no longer into creating webpages.
But i am trying to paint a picture of what the differences are between browsers and webpage rendering differences.
Bottom line, if the webpage designer had also used FF to test the page, the flaw would have been found and corrective measures would have been implemented into the codes. Sometimes adding a few extra codes or rearranging the codes, can fix the faults.
empleat said
It happens only in browser, not on the steam, across multiple instalations of Windows and multiple DNS servers, maybe even in Chrome... https://imgur.com/a/d3xQ5Fh
It looks fine to me in Firefox, but in your screenshot, the left column is not using the full width; it seems to be collapsing for some reason. (See comparison screenshot)
You may have accidentally zoomed webpage(s). Reset the page zoom on pages that cause problems.
- View -> Zoom -> Reset (Ctrl+0/Command+0 (zero))
If you have made changes to Advanced font-size settings like increasing the minimum/default font-size then try the Default font-size setting "16" and the Minimum font-size setting "none" in case the current setting is causing the problem.
- Options/Preferences -> General: Fonts & Colors -> Advanced -> Minimum Font Size (none)
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"
jscher2000 said
empleat said
It happens only in browser, not on the steam, across multiple instalations of Windows and multiple DNS servers, maybe even in Chrome...It looks fine to me in Firefox, but in your screenshot, the left column is not using the full width; it seems to be collapsing for some reason. (See comparison screenshot)
Also (keep in mind) it is happening on multiple sites besides these 2! Maybe I try to reinstall FF, if text freezes will also occur!
Also could freezes happen because one instance of firefox is set to use hardware acceleration and second is not?
Okulungisiwe