Join the Mozilla’s Test Days event from Dec 2–8 to test the new Firefox address bar on Firefox Beta 134 and get a chance to win Mozilla swag vouchers! 🎁

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

Terrible font rendering in v101

more options

Lighter fonts (from multiple families, and on multiple websites) are rendered so poorly they are barely legible.

I already tried disabled performance settings, and turning off ClearType in Windows (it barely had any effect)

How do we fix this?

Lighter fonts (from multiple families, and on multiple websites) are rendered so poorly they are barely legible. I already tried disabled performance settings, and turning off ClearType in Windows (it barely had any effect) How do we fix this?
Attached screenshots

Chosen solution

I had to delete the offending fonts (Montserrat, and Helvetica) from my Windows/Fonts folder. Then the sites started displaying properly.

Not sure if this is an issue with Firefox not allowing the site to use it's own fonts (I have that option enabled), but it was definitely defaulting to different families/weights from the OS.

Read this answer in context 👍 0

All Replies (8)

more options

With such a light text color you would expect a darker background color for better contrast.

Did you make changed to the default color settings in "Settings -> General -> Colors" ?

  • Settings -> General: Fonts & Colors -> Colors
more options

Hey cor-el, appreciate the quick reply!

Nope, I haven't changed any of the colour settings. It's not really a colour problem, it's more of a font-weight / anti-aliasing problem I think, like FF is using 300 when it should be using 500 (just an idea).

Here is what that same page looks like in Chrome:

more options

It seems to be ignoring the font-weight CSS property completely. On another site I am working on, this text is set to "Bold" in the CSS. It is correct in Chrome (second screenshot). First Screenshot shows FF's rendering it like it's "light"

more options

You can right-click and select "Inspect" to open the built-in Inspector with this element selected.

You can check in the Rules tab in the right panel in the Inspector what font-family is used for selected text. You can check in the Fonts tab in the right panel in the Inspector what font is actually used because Firefox might be using a different font than specified by the website.

more options

If need be, you can alter the font weight in userContent.css in the chrome folder of your Firefox profile.

more options

@Cor-el

Thanks for that suggestion! After inspecting the Fonts tab in the right-panel it appears that it's using Bold when it should be using Regular (the weight is 500, not 600/700). Why is it substituting the heavier weight?

@Terry There is no Chrome folder in the Local or Roaming folders.

Modified by Chad Reitsma

more options

No, you have to create the chrome folder and css files, I should have said. The userContent.css is a counterpart to the userChrome.css file which relates to the browser itself. There is some general information below (remove the blank space in the link).

https://www.userchrome. org/how-create-userchrome-css.html

more options

Chosen Solution

I had to delete the offending fonts (Montserrat, and Helvetica) from my Windows/Fonts folder. Then the sites started displaying properly.

Not sure if this is an issue with Firefox not allowing the site to use it's own fonts (I have that option enabled), but it was definitely defaulting to different families/weights from the OS.

Modified by Chad Reitsma