How to get rid of blurry and thus bolder web fonts and to preserve special font glyphs/icons
Problem: Disabling webfonts completely doesn't work, because many websites use font icons. Usually, icons are a critical part of web-site functionality, so without web-fonts sites like Github become unusable.
Please compare the attached screenshots to see the unwanted font rendering in comparison to the desired one.
Note: For some reasons, the attached screenshots are not showed in their original sizes, and thus the described and discussed effects are not seen. To avoid this site/FF behavior, please open these screenshots in a separate tab/window (via the context menu because the site's engine catches and ignores Ctrl+Left Mouse Button), and then scale up to the original size if needed.
The following options are in effect for all the screenshots:
- Display: LCD, 24", 1920x1200x32, 96 dpi (HP Compaq LA2405wg)
- GPU: Saphire ATI Radeon X1950GT
- Font preferences: ClearType and anti-aliasing are disabled in the system settings
- Allow pages to choose their own fonts, instead of my selections above: checked, see Options -> Content -> Advanced.
The screenshots with unwanted, blurred, smoothed, anti-aliased and thus bolded fonts:
- (6) from support.mozilla.org: anti-aliased font, full zoom 120%
- (1) from bugzilla.mozilla.org: anti-aliased font, full zoom 120%
- (3) Ghostery add-on: "anti-aliased" font
These screenshots were obtained at the following customized preferences:
- gfx.font_rendering.cleartype_params.rendering_mode: 1 (aliased)
- gfx.downloadable_fonts.woff2.enabled: false
- gfx.font_rendering.opentype_svg.enabled: false
The best and desired result was obtained from Reddit at the same preferences (8), full zoom 115%:
- There are no unprintable glyphs, icons and characters.
- Strokes are one-pixel wide, no smoothing, no anti-aliasing, and thus no blurred or bolded text.
- Each glyph is rendered with pixel precision and is exactly fitted the pixel grid.
The screenshots with the desired thin and legible fonts without anti-aliasing and distortions but with unprintable glyphs/icons somewhere:
- (7) from support.mozilla.org, full zoom 120%
- (2) from developer.mozilla.org: There are unprintable icons, full zoom 120%
- (5) from Reddit: There are unprintable glyphs/icons, full zoom 115%
- (4) Ghostery add-on: normal, legible font
These screenshots were obtained at the same customized preferences and:
- gfx.downloadable_fonts.enabled: false
But at this option, glyphs/icons like arrows and others are not rendered (see rectangles/arrows in red/blue pointing to). The good and desired side effect is that pages are loaded and rendered faster, typing is also much faster, and UI is much more responsive.
false, text becomes partially distorted as in screenshot (9), see red underlining.
How to get rid of smoothed/anti-aliased fonts and blurred and thus bolded text, to get thin/one-pixel-wide fonts without anti-aliasing and any distortions and to preserve special glyphs/icons at the same time as e.g. in screenshot (8)?
Modified by Worad
Additional System Details
- Shockwave Flash 21.0 r0
- User Agent: Mozilla/5.0 (Windows NT 5.2; rv:47.0) Gecko/20100101 Firefox/47.0
Modified by Worad