Here is the solution to the pesky problem that plagued me for two days. After the fresh installation of Arch Linux, Firefox was rendering me broken Bengali fonts. The issue was especially prominent in social media pages.

As you can see, the configuration was correct. At this same configuration, the font was rendering perfectly in Chromium. For some idealistic reason, I wanted to use Firefox anyway possible. I keep Chromium for backup purpose only.

What was the issue then?

After searching countless hours, I got the same result. Installing the noto-sans-font was the solution. As you can see, I did that already. In a Firefox support page, I got the idea of using the debugging tool provided by the browser. By using this official guide, I debugged the webpage I was having the issue with. To my utter surprise, webpages were loading one more font, along with noto-sans. A package called ttf-liberation was installed as Chromium dependency and that was causing the problem.

Solution

1. Force removed the package from the system using:

pacman -Rdd ttf-liberation

1. Launched Firefox and everything was working fine.

2. Installed the package again, as it is a Chromium dependency:
   

pacman -S ttf-liberation

I felt compelled to write this as this kind of obscure difficulties are very hard to solve, and I somehow chanced upon one.