I have done my research, I initially tried fixing CJK fonts rendering looking shit, I fixed that with the following .conf file in ~/.config/fontconfig/conf.d
https://gist.github.com/sorat0mo/c185e852480af28bcb666bc05f173fb4
Below is my problem, see the characters i and I (capital i)
Brave:
Firefox/Librewolf:
I tried in Firefox (Arch repo), Firefox (Flatpak) and Librewolf(Flatpak), I am using Librewolf(Flatpak) at the moment. To compare, I opened the same page in Brave (Flatpak) and you can see clearly Firefox did not render as good as Brave. I enabled LCD filter as per suggestion by @keybreak but that didn’t fix the problem for me.
I also have to add that it does not seem to be a generic problem across all websites, but some website here and there. For example, the Endeavour OS forum does not seem to have this issue:
https://files.catbox.moe/gepjx3.webp
Now if I disabled the Firefox option “Allow pages to choose their own fonts, instead of your selection above”, everything looks cleaner again(Firefox):
I am not sure where to look into or what keywords I need to fix this annoying problem. Here is my font configuration in both browsers if it’ll help.
https://files.catbox.moe/wz1570.webp
https://files.catbox.moe/tq01xa.webp
Here is output of pacman -Qs font
https://files.catbox.moe/3fw6zu