Terrible font rendering in v101
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?
الحل المُختار
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 👍 0All Replies (8)
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
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:
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"
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.
If need be, you can alter the font weight in userContent.css in the chrome folder of your Firefox profile.
@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
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
الحل المُختار
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