Does CSS letter-spacing not work with SVG fonts in Safari?

Question

The title pretty much says it all. I'm generating font-face kits using font squirrel and I am having issues with letter spacing in Safari.

As webkit browsers render SVG fonts so much nicer than WOFF fonts, I obviously want to use SVG. However I noticed that letter-spacing doesn't seem to be working in Safari. Is this a known issue?

Answer 1

Probably you can refer previous posts on this,

Safari, letter-spacing with custom font

Is there a way to make css letter-spacing: 0.5 px?

Safari Bug

This link of bug says that using JavaScript you can assign the spacing. Its weird bug..

I am sure this links will give you some insights..

I have found one Fiddle [Fiddle]4

That will reduce your work, perhaps this works fine in Chrome now I am using version 26 of Chrome. I do not have safari installed, as I am not one of the safari fan. :)

Answer 2

As pointed out by MarmiK, this is a known issue in the WebKit bug list (Bug #20606). The fact that it affects WebKit as a whole means that it should show up in Chrome, Safari and any other WebKit browser.

The latest on the bug, however, is that it was picked up by one of the Chromium developers on or around 2013-03-22, which is major progress as the bug remained unassigned for nearly 4 years.

Given that other typographic / alignment type bugs have been fixed recently (such as 99439, which relates to implementing text-align-last), it seems that the WebKit development community is in the process of focusing some of these issues down.

If you want to keep track of the ongoing development around this issue, please continue to follow the Bug 20606 History, or track the Bug 20606 Discussion. The first link will show you progress / commits / edits related to the bug and its development efforts. The second will show you the user / developer conversation around the bug, as well as the auto-generated commentary of the Build Bot, as it runs unit-tests against any relevant checked-in code.

Finally, to check in any given build of your preferred browser against other benchmarks for this implementation, take a look at this link. The top-left will display your browser's rendering, and the screenshots below will show other browsers (a little outdated at this point) - and how they implement non-integer letter-spacing values. Alternatively, you can see something similar by referring to this jsFiddle.