We're calling on all EU-based Mozillians with iOS or iPadOS devices to help us monitor Apple’s new browser choice screens. Join the effort to hold Big Tech to account!

This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

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

Small fonts have color distortions when rendering on Linux, how to fix?

  • 4 replies
  • 2 have this problem
  • 5 views
  • Last reply by FredMcD

more options

I noticed that small fonts on one website were strangely colorful. I narrowed it down to a simple HTML snippet:

<span style="font-family:sans-serif; font-size:10pt; font-weight:lighter; color:white; background-color:black;"
      >The quick brown fox jumps over the lazy dog</span>

Attached scaled image on how it renders on my Linux Firefox 47.

The text is supposed to be white, and it is working on windows. On two different Linux distributions (Arch and Ubuntu) colors appear out of nowhere. Does Firefox need something specific to be installed on Linux for correct font rendering?

I noticed that small fonts on one website were strangely colorful. I narrowed it down to a simple HTML snippet: <pre><nowiki><span style="font-family:sans-serif; font-size:10pt; font-weight:lighter; color:white; background-color:black;" >The quick brown fox jumps over the lazy dog</span></nowiki></pre> Attached scaled image on how it renders on my Linux Firefox 47. The text is supposed to be white, and it is working on windows. On two different Linux distributions (Arch and Ubuntu) colors appear out of nowhere. Does Firefox need something specific to be installed on Linux for correct font rendering?
Attached screenshots

Modified by cor-el

Chosen solution

Looks that Firefox has a problem with the anti-aliasing settings and uses all available horizontal RGB pixels to render the text.

Read this answer in context 👍 2

All Replies (4)

more options

Seems HTML wasn't escaped correctly in the original post:

<span style="font-family:sans-serif; font-size:10pt; font-weight:lighter; color:white; background-color:black;"

     >The quick brown fox jumps over the lazy dog</span>
more options

Chosen Solution

Looks that Firefox has a problem with the anti-aliasing settings and uses all available horizontal RGB pixels to render the text.

more options

cor-el said

Looks that Firefox has a problem with the anti-aliasing settings and uses all available horizontal RGB pixels to render the text.

Disabling sub-pixel rendering solved the issue, thanks.

more options

Hello,

I am glad to hear that your problem has been resolved. If you haven't already, please select the answer that solves the problem. This will help other users with similar problems find the solution more easily.

Thank you for contacting Mozilla Support.