@font-face and letter-spacing in webkit

Question

I just discovered that letter-spacing doesn\'t always work in webkit (and perhaps other browsers?) when embedding fonts. I\'ve tried it on two different fonts and received

Answer 1

It seems to me that this is caused only by svg fonts!!! I wasn't able to verify it strictly but my test cases prove that much.

Reorder your font-face urls putting svg format last, it should fix the problem. But svg fonts won't get used and rendering might be dirty(er)

Answer 2

I had the same problem, and I was able to clear it up using this code:

@font-face {
    font-family: 'League Gothic';
    src: url('/assets/fonts/league_gothic-webfont-webfont.eot');
    src: local('‚ò∫'),
            url(data:font/woff;charset=utf-8;base64,/* base64-encoded font here */) format('woff'),
            url(data:font/truetype;charset=utf-8;base64,/* base64-encoded font here */) format('truetype'),
            url('/assets/fonts/league_gothic-webfont-webfont.svg#webfontu5sqNtGI') format('svg');
    font-weight: normal;
    font-style: normal;
}

This was mostly generated from FontSquirrel and then modified slightly (I removed the local() stuff and substituted the junk characters).

This cleared up my letter-spacing issues.

Answer 3

I'm not sure I have the answer but I was having a word-spacing problem with League Gothic from Font Squirrel, I couldn't figure it out until I re-generated the font-face stuff on the site using different settings. I use the Paul Irish's Bulletproof method...

Font Squirrel settings http://img59.imageshack.us/img59/8784/screenshot20100428at132.png