Letter spacing issue, two letters stick together despite adding letter spacing

Question

I am running into weird issue. I have attached screenshot of letter spacing issue. Initially I noticed that letters Fi aren't rendering properly. So I tried adding letter spacing but these two letters don't want to separate from each other. I have never noticed such behavior.

In screenshot I am using Lato font, but I notice same behavior with Open Sans. Other random fonts that I tried render properly. The issue is only happening in Chrome and Firefox, while IE renders font correctly.

Any guesses what could be causing it and how it be fixed? Any suggestions will be great. Thanks.

Answer 1

Solved. It is ligarature issue. Found this article with following css as solution.

  -webkit-font-feature-settings: "liga" 0, "clig" 0;
     -moz-font-feature-settings: "liga" 0, "clig" 0;
          font-feature-settings: "liga" 0, "clig" 0;