We're calling on all EU-based Mozillians with iOS or iPadOS devices to help us monitor Apple’s new browser choice screens. Join the effort to hold Big Tech to account!

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

How to get rid of blurry and thus bolder web fonts and to preserve special font glyphs/icons

  • 1 reply
  • 1 has this problem
  • 11 views
  • Last reply by Worad

more options

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:

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:

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.

If gfx.font_rendering.cleartype.use_for_downloadable_fonts set 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)?

'''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, [https://support.mozilla.org/en-US/kb/settings-for-web-content-pop-ups-fonts-languages see Options -> Content -> Advanced]. The screenshots with unwanted, blurred, smoothed, anti-aliased and thus bolded fonts: * [https://support.cdn.mozilla.net/media/uploads/images/2016-06-16-16-54-43-ece288.png (6)] from support.mozilla.org: anti-aliased font, full zoom 120% * [https://support.cdn.mozilla.net/media/uploads/images/2016-06-16-16-41-12-66b6ac.png (1)] from bugzilla.mozilla.org: anti-aliased font, full zoom 120% * [https://support.cdn.mozilla.net/media/uploads/images/2016-06-16-16-52-59-ab404b.png (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 [https://support.cdn.mozilla.net/media/uploads/images/2016-06-16-17-04-09-5a0d57.png (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: * [https://support.cdn.mozilla.net/media/uploads/images/2016-06-16-16-55-02-84df83.png (7)] from support.mozilla.org, full zoom 120% * [https://support.cdn.mozilla.net/media/uploads/images/2016-06-16-16-41-33-e6d57d.png (2)] from developer.mozilla.org: There are unprintable icons, full zoom 120% * [https://support.cdn.mozilla.net/media/uploads/images/2016-06-16-16-54-20-4c88cb.png (5)] from Reddit: There are unprintable glyphs/icons, full zoom 115% * [https://support.cdn.mozilla.net/media/uploads/images/2016-06-16-16-53-23-08110e.png (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. If <code>gfx.font_rendering.cleartype.use_for_downloadable_fonts</code> set <code>false</code>, text becomes partially distorted as in screenshot [https://support.cdn.mozilla.net/media/uploads/images/2016-06-16-18-32-08-6808e3.png (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 [https://support.cdn.mozilla.net/media/uploads/images/2016-06-16-17-04-09-5a0d57.png (8)]?
Attached screenshots

Modified by Worad

All Replies (1)

more options

deleted

Modified by Worad