Fonts render badly on many websites
Categories
(Core :: Graphics: Text, defect, P3)
Tracking
()
People
(Reporter: x3dgames, Unassigned)
References
(Blocks 1 open bug)
Details
Attachments
(2 files, 2 obsolete files)
Chrome and PaleMoon browser vs Firefox on reddit and stackoverflow websites
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:79.0) Gecko/20100101 Firefox/79.0
Steps to reproduce:
Opened websites, like reddit, and some others, please see below including screenshots (in 100% scale).
Actual results:
The font rendered not so smooth and clear as in any other browser. I immediately see the defect because my job connected to UX and a bit front end development. The font is "eye-damaging" and disgusting.
The example screenshots show the issue. Pale Moon browser and Chrome show nice fonts, although they render them differently. Only Firefox show corrupted fonts: rough outlines, sometimes look blurry.
Tried this on different PCs, with a fresh Firefox installation, even with high DPI display the problem persists, the Firefox font displaying is disgusting.
Played with all related settings in: gfx.canvas.azure. gfx.content.azure. gfx.font_rendering. sections of the configuration. None of them led to success. ClearType re-calibration made no effect, because any other apps show normal fonts, so the defect in Firefox only.
Ordinary user shouldn't have these issues, and they shouldn't play with config settings; no wander Firefox could easily lost its users with such "eye-damaging" view. Please, pay attention to this problem.
Expected results:
The fonts should be smooth but clear, without rough outlines, not too bold and without color aberration.
|
||
Comment 1•4 years ago
|
||
Bugbug thinks this bug should belong to this component, but please revert this change in case of error.
|
||
Comment 2•4 years ago
|
||
Thanks for filing this. Could you copy-paste the content of the Graphics section of your about:config page here?
Added gfx section of one machine, please see the attachment.
Added gfx section of one machine, please see the attachment.
Please, inform whether it is ok.
|
|
||
Comment 5•4 years ago
|
||
Sorry Alexander I meant to write about:support and wrote about:config. Could you provide the Graphics section of your about:support page ?
Yes, please see the attachment.
|
|
||
Updated•4 years ago
|
|
|
||
Updated•4 years ago
|
|
|
||
Updated•4 years ago
|
|
||
Comment 7•4 years ago
|
||
Other than us having a slightly different interpretation of contrast here than Chrome, I don't necessarily see anything affecting the actual blurriness. Maybe we are rendering as GDI here instead of DWrite, or something to that effect? Any observations Jonathan?
|
||
Comment 8•4 years ago
|
||
It's not clear to me exactly what the reporter is complaining about. Comparing the Firefox vs Chrome images from reddit, the "blurriness" seems quite similar (both are using fractional-pixel glyph positioning, so that the exact image of a given glyph varies depending where it falls on the line; both are rendering in grays only). The Chrome screenshot seems a bit washed-out to me, while Firefox has stronger contrast, but it's not clear whether one is "better" than the other, or which is more "correct".
The Pale Moon reddit rendering is quite different in that it shows subpixel color fringing; this may result in looking a bit "sharper", at the cost of the color fringing effects (which some people barely notice, and others find really jarring). I don't know why they get subpixel-AA here, while both Chrome and Firefox show grays.
In the case of the stackoverflow page, there is a significant difference: it looks to me like Chrome is using subpixel AA with fractional glyph positioning, whereas (I think) Firefox may be using integer-pixel glyph positioning, which would suggest perhaps we're trying to apply GDI-style rendering here. But it doesn't look like the glyphs are actually rasterized for pixel-snapped grayscale rendering; they look more like ClearType subpixel-antialiased glyphs that have been "flattened" to grays, so that what should be the color fringes that enhance apparent clarity are instead appearing as gray blurriness.
The screenshots really seem to look not very bad, although it is really 'eye-damaging' om many websites, as good as Chrome or PaleMoon, without roughnesses and blur defects.
Completely disabling WebRender made Firefox render everything clear and smooth. So the problem is in WebRender. Not GDI-related.
|
||
Comment 10•1 year ago
|
||
Font rendering issues on websites can be caused by a variety of factors such as improper font formats, outdated browsers, and poor coding practices.
In the provided link https://instadpdownloads.com/video/, the font rendering issue might be due to the improper use of font formats or poor coding practices.
To fix font rendering issues, website developers should use appropriate font formats, optimize their code, and ensure compatibility with different browsers.
Users can try clearing their browser cache, updating their browser, or using a different browser to see if it resolves the font rendering issue.
Ultimately, ensuring proper font rendering is important for a website's usability and user experience.
Description
•