Fonts on firefox pages displaying random colors

Archnoob · October 21, 2020, 6:09am

Most websites with text display random blue letters or blue parts of letters which are supposed to be black. Some have other colors

It started a couple of weeks ago on both Endeavour KDE and my Manjaro KDE after I updated them both. XFCE still displays everything perfectly so it’s not my monitor. I didn’t change any of the fonts recently

Here’s a picture of some text at the top of this page, first the correct render on XFCE and in the second screen capture on KDE you can see a few random blue letters. Does anyone know what’s causing this?

freebird54 · October 21, 2020, 7:00am

I’m not sure that the pics you posted show much - perhaps it self-corrected in the screenshot app? Or, perhaps, my eyes just can’t see it… Anyway - here is a possible help that I picked up elsewhere…

mv ~/.config/fontconfig/fonts.conf  ~/.config/fontconfig/fonts.conf.bak

followed by:

sudo fc-cache -fv

which should rebuild the font references. It can’t hurt anything, anyway! (At worst - just copy the backup file back to the normal name…

Schlaefer · October 21, 2020, 7:05am

Something is up with the Firefox subpixel rendering/anti-aliasing. Since ca. two weeks ago fonts started to look atrocious. Mostly too thin and very badly hinted.

freebird54 · October 21, 2020, 7:11am

I just ‘fired up’ Firefox, and nothing appears to be different on mine. I’m set to Deja Vu serif (16) and all appears well. I’m on a 4K monitor, though, so that may be affecting (ie: helping) the situation. I saw something similar in another arch-based distro - and the ‘help’ described above cured it (weird colours in small conky fonts)

FLVAL · October 21, 2020, 7:17am

I’m not sure that the pics you posted show much - perhaps it self-corrected in the screenshot app? Or, perhaps, my eyes just can’t see it…

Maybe you couldn’t see it cause the blue letters are on the first picture not the second as @Archnoob said, it should be reversed

first the correct render on XFCE and in the second screen capture on KDE you can see a few random blue letters. Does anyone know what’s causing this?

FLVAL · October 21, 2020, 7:26am

Hi @Archnoob

first if it works on XFCE it’s not you hardware.
Which font do you use ?
Did you try another browser to check if only Firefox is the culprit ?

Then check if in disabling the font hinting through KDE settings resolves it ?
Could be also the Anti-aliasing that convert the vector font as bitmap, you could test to disable it also ?

  <match target="font">
    <edit name="hinting" mode="assign">
      <bool>false</bool>
    </edit>
  </match>

  <match target="font">
    <edit name="antialias" mode="assign">
      <bool>false</bool>
    </edit>
  </match>

Note: For some desktop environments (such as GNOME and KDE) using the Font Control Panel will automatically create or overwrite the user font configuration file. For these desktop environments, it is best to match your already defined font configurations to get the expected behavior. Also ensure that the desktop locale settings or Regional Settings are supported by the configured fonts, if not the font configuration could be overidden.

In watching better you screenshot, there is not only blue but red and green around letters, wich means RGB !

Then you could check into /etc/fonts/conf.avail if sub-pixel RGB is enable or not ?

Schlaefer · October 21, 2020, 7:59am

Praise the Arch Wiki!

Starting from FreeType 2.10.3, Arch Linux enables ClearType subpixel rendering by default [4].

…

When using ClearType subpixel rendering, you should enable the LCD filter, which is designed to reduce colour fringing.

So let’s enable one:

# ln -s /etc/fonts/conf.avail/11-lcdfilter-default.conf /etc/fonts/conf.d/
# fc-cache --force

Restart Firefox. Much better.

Tinymeat · October 21, 2020, 8:26am

Must be “fc-cache --force”

Tinymeat · October 21, 2020, 8:51am

I had the same problems as the OP but your advice did the trick
Even my weird fonts in GNOME are clear now, thank you!

Kresimir · October 21, 2020, 8:59am

I noticed this yesterday, but I fixed by selecting “None” under sub-pixel rendering in System Settings -> Fonts

Also, I set GTK_USE_PORTAL=1 when running Firefox, as described here.

keybreak · October 21, 2020, 9:06am

Not the best idea i’d say

P.S. I use GTK portal, btw

Kresimir · October 21, 2020, 9:08am

looks good to me

keybreak · October 21, 2020, 1:24pm

Wonder why the hell they have enabled subpixel rendering without enabling LCD filter by default…
That’s kinda stupid

Tinymeat · October 21, 2020, 1:50pm

Even with Subpixel-Rendering active the fonts weren’t rendered in the desired way in GNOME

How would I know then?

keybreak · October 21, 2020, 1:58pm

fontconfig lives by it’s own, if you don’t know about it’s existence - you’re doomed to see that crap…
Why it’s not controlled by DEs…No idea

Tinymeat · October 21, 2020, 2:09pm

Must be a regression. With GNOME 3.36 all went well. It’s the first time since a couple of years I have to struggle with “fontconf”. The same is true of KDE and it’s rendering. Yeah, “wonder why”…

keybreak · October 21, 2020, 2:10pm

I think it was always this way, it’s just fonctonfig had more matching default settings to average DEs before, so it wasn’t that obvious

Archnoob · October 21, 2020, 2:10pm

I installed Chromium to check and it rendered fine, so I’ve isolated it to the combination of Firefox and KDE. When I magnify a Firefox browser tab to 120% or higher, the problem goes away for some reason.

The pictures from my first post aren’t really easy to see. I cut a tiny piece of text from the the EOS Wikipedia page and blew it up in GIMP to show some blue letters

Screenshot_2020-10-21 EndeavourOS - Wikipedia

keybreak · October 21, 2020, 2:11pm

Just do that and restart browser it should be fine

Archnoob · October 21, 2020, 2:18pm

Thanks, this one worked