font rendering too thick
It seems that Firefox is rendering fonts a bit too thick. font-weight is set to the right values, the problem is partially solved when decreasing the weight 100 (from 300 to 200) but is then displayed too thin on the other browsers.
This image shows Safari 6, Chrome 25 and Firefox 19
http://palacz.at/exchange/comparison.png
You also can see clearly that the Font Awesome Icons I used are too thick and don't look good at all. Also the font-weight is set correctly and is displayed correctly in the Inspector of Firefox.
Ti ṣàtúnṣe
All Replies (13)
The Reset Firefox feature can fix many issues by restoring Firefox to its factory default state while saving your essential information. Note: This will cause you to lose any Extensions, Open websites, and some Preferences.
To Reset Firefox do the following:
- Go to Firefox > Help > Troubleshooting Information.
- Click the "Reset Firefox" button.
- Firefox will close and reset. After Firefox is done, it will show a window with the information that is imported. Click Finish.
- Firefox will open with all factory defaults applied.
Further information can be found in the Refresh Firefox - reset add-ons and settings article.
Did this fix your problems? Please report back to us!
Which font is that? Is there a demo page online for viewing/tweaking?
MDN reference: https://developer.mozilla.org/en-US/docs/CSS/font-weight
@tyler: Sorry I did not mention that I already reset Firefox. @jscher2000: The font is the famous Source Sans Pro. Of course the rendering is correctly on http://www.google.com/webfonts/specimen/Source+Sans+Pro
Here is a demo page http://test78364.test-account.com/_/
Any clues?
Looks fine here on Linux with the Source Sans Pro font.
Reset the page zoom on pages that cause problems.
- View > Zoom > Reset (Ctrl+0 (zero); Cmd+0 on Mac)
Try to disable hardware acceleration in Firefox.
- Tools > Options > Advanced > General > Browsing: "Use hardware acceleration when available"
- https://support.mozilla.org/kb/Troubleshooting+extensions+and+themes
Try to set the gfx.content.azure.enabled pref to false or if this didn't help disable Direct2D by setting the gfx.direct2d.disabled pref to true on the about:config page and leave hardware acceleration otherwise enabled.
Hi dreerr, at first I got the same results you got, but then I noticed that the font download was being blocked by NoScript, so another font was being substituted. After I allowed the font download, Firefox lined up with IE9 and Chrome (on Windows 7 Pro 64-bit).
Odd enough this problem only seems to exist under OS X and then also under certain circumstances. In BrowserLab everything also seems fine to me. I will do a complete reinstall of FF on my system and see if the problem persists. Thanks for all the answers!
I have had the same issue.
I determined it's due to KB2670838 update that made changes to the following files.
D3D10SDKLayers.dll D3D11SDKLayers.dll D3D10ref.dll D2D1debug.dll
Platform Update for Windows 7 x64-Edition (KB2670838)
http://support.microsoft.com/kb/2670838
DO NOT INSTALL THIS UPDATE AT THIS TIME
Hi HiroPro, just FYI, the original poster is running a Mac, but your post may be useful to Windows users reading this thread who have the same symptoms, or Mac users with the same graphics chips.
Note: First attached image
As a Firefox user, we shouldn't have to go through settings to try and resolve this problem, as it won't work for a wide variety of users anyway.
Any news on Firefox resolving this? Has been annoying me for years.
See my attach image, you can see the differences.
Note: Second attached image
I like how they use "Open Sans Light" on there website, as Helvetica with -webkit-font-smoothing would give the same visual look in terms of weight.
Quick comparison between the live site in Firefox (Left) using "Open Sans Light" vs a screenshot of Safari (Right) with the font "Helvetica" with font smoothing on.
Ti ṣàtúnṣe
Actually this is not a problem with Firefox, it is happening because Webkit based browsers have support for -webkit-font-smoothing property which allows a site owner to alternate the system font smoothing on Mac OS X (which I think is completely wrong). Firefox on the other hand always uses system wide settings for font smoothing.
In OP's case there is -webkit-font-smoothing: antialiased; somewhere in CSS which disables the native system wide antialiasing in Webkit browsers, while Firefox is using system settings.
The right solution is to remove -webkit-font-smoothing: antialiased; from your CSS and reduce the font-weight a little bit
Ti ṣàtúnṣe
Yes, but -moz should create a similar prefix, as icon fonts just don't cut the mustard on the internet in this day and age.
The right solution is to serve beautiful websites to people that have a browser that cares about typography ( -webkit browser. )
Not really a problem for the Window's users, as the fonts render bad across the entire OS. I think they have finally improved this for Windows 7.
-webkit-font-smoothing for life, please give us -moz-font-smoothing.
PS: Digital typography looks better on a Mac. ( Apart from whatever Firefox does. )
Ti ṣàtúnṣe
If Internet Explorer can render fonts correctly on Windows 7, then Firefox can do the same across both operating systems.
Left to Right
Firefox ( Mac ) , Chrome ( Mac ) , Internet Explorer ( PC ) , Firefox ( PC )
Ti ṣàtúnṣe