Why does letter spacing not always work with all letters?

Question

I've had this occur with some @font-face webfonts in the past. I recently downloaded the free Museo Sans 500 webfont, but am running into some problems with certain letters spacing properly, spficically the letter f. When adjusting the CSS letter-spacing property, whereever there is an "f" it doesn't apply the letter spacing again until the second letter following the "f".

For example:

Or another example using a word:

Anyway, I came across this site which also uses the font, however when messing with the text and letter spacing on their site it doesn't have any issues.

I've never created or edited a font before so I'm not sure if this has to do with editing the font itself, or if it's something to do with the @font-face and possibly something I could fix with css.

I've tried messing with every css font property I'm aware of but none of them seemed to fix the issue.

font-variant-ligatures:
font-kerning: 
letter-spacing:     
text-rendering: 
font-feature-settings: 
font-kerning: 
-webkit-font-smoothing: 
text-size-adjust:
font-size:

I came across a pretty nifty plugin, kerning.js which I was able to use to temporarily fix this issue, but it seems like overkill for one letter, especially since it seems to work fine on other sites like the one I linked earlier. Any suggestions on how to fix this with CSS or is it something I have to do with the font itself>

Answer 1

This happens because your version of Museo contains ligatures, and the one served by Typekit on that other site doesn't. The reason the letters "ffi" stay close to eacht other is because it's a ligature — one "drawing" of three letters, instead of three separate letters. Modern browsers turn these on by default.

You should be able to turn off ligatures with font-feature-settings: "liga" 0;, or if you don't use them altogther, an even simpler solution would be to use a version of Museo without ligatures.