How to fix poor webfont rendering on Firefox 40, Windows 8.1?
Look at those uploaded screenshots. First one was taken at 100% zoom (I manually reset it with Ctrl+0) Second one was taken after Ctrl+Num+, so the page is a bit zoomed. It's clearly visible, that at 100% zoom, font is sharp and poorly rendered. What can I do to fix it? I don't like zooming, as it makes text too big (and images blurry).
Also, it occurs on many websites, but I think it's related to using webfonts through @font-face CSS attribute. System-installed fonts render fine at all sizes.
All Replies (11)
Try disabling graphics hardware acceleration. Since this feature was added to Firefox, it has gradually improved, but there still are a few glitches.
You will need to restart Firefox for this to take effect so save all work first (e.g., mail you are composing, online documents you're editing, etc.).
Then perform these steps:
- Click the menu button and select Options on Windows or Preferences on Mac or Linux.
- Select the Advanced panel and then the General tab.
- Uncheck Use hardware acceleration when available.
- Restart Firefox and see if the problems persist.
Did this fix your problems? Please report back to us!
If the problem is resolved, you should check for updates for your graphics driver by following the steps mentioned in these Knowledge base articles:
Thank you.
Disabling graphics acceleration didn't help, just made it worse. Before, when I zoomed the page in, the font became smooth, like you can see on 2nd screenshot.
Now, when I disabled acceleration it's ugly sharp on all sizes, both zoomed in and out.
Modified
Did you ensure that your graphics drivers are up-to-date? More information can be found here:
Also, please ensure that you are running the recommended screen resolution on your system. Some screens do not support all resolutions. Check with your manufacturer for more details.
Just updated NVIDIA drivers to newest version. I run native resolution, 1920x1080. The problem with text rendering appears below some particular font-size. For example, it works fine for for 20px, 21px, 22px and higher, but for 19px, 18px and lower it's ugly. And usually it happens for webfonts. I confirmed it not working using font "Lato" and "Neuton".
Can you please ensure that the font smoothing feature on your Windows system is enabled? Simply follow the steps in this article, but enable it instead of disabling.
Yes, ClearType is enabled. I re-enabled it just to be sure and problem persists. Look at another screenshots. First one is from Firefox, and second from Internet Explorer .
Look for example at letters "O" or "g". Kerning in "rt" seems to be broken, it doesn't even match. On Internet Explorer at least it doesn't hurt my eyes.
Modified
Can you please file a bug report on Bugzilla, so that our development team can take a look at the issue?
What is the value of the layout.css.devPixelsPerPx pref on the about:config page?
Try to set layout.css.devPixelsPerPx to 1.0 or 1.2 (default is -1) on the about:config page. If necessary adjust its value in 0.1 or 0.05 steps (1.1 or 0.9) until icons or text looks right.
What font is Firefox using?
You can right-click and select "Inspect Element" to open the Inspector (Firefox/Tools > Web Developer) with this element selected.
You can check the font used for selected text in the Font tab in the right pane of the Inspector.
This can be a problem with the font that is used to display the text.
You can try different default fonts and temporarily disable website fonts to test the selected default font.
- Tools > Options > Content : Fonts & Colors > Advanced
- [ ] "Allow pages to choose their own fonts, instead of my selections above"
Make sure the re-enable "Allow pages to choose their own fonts" to avoid issues with downloaded icon fonts.
cor-el said
You can try different default fonts and temporarily disable website fonts to test the selected default font.Make sure the re-enable "Allow pages to choose their own fonts" to avoid issues with downloaded icon fonts.
- Tools > Options > Content : Fonts & Colors > Advanced
- [ ] "Allow pages to choose their own fonts, instead of my selections above"
It helps as temporary fix, but makes me limited just to few fonts. I sent issue to Bugzilla.
Modified
Hi lipvig, Can you post the link to the bug here?