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

font rendering too thick

  • 13 replies
  • 11 have this problem
  • 1 view
  • Last reply by miketee

more options

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.

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.

Modified by dreerr

All Replies (13)

more options

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:

  1. Go to Firefox > Help > Troubleshooting Information.
  2. Click the "Reset Firefox" button.
  3. Firefox will close and reset. After Firefox is done, it will show a window with the information that is imported. Click Finish.
  4. 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!

more options

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

more options
more options

@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?

more options

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.

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.

more options

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).

more options

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!

more options

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

more options

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.

more options

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.

Modified by miketee

more options

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

Modified by cyberface

more options

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. )

Modified by miketee

more options

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 )

Modified by miketee