Letter Spacing Css with custom font on safari?

Question

I'm developping a website and I just realised there is a problem with my font rendering only on Safari and I don't find a solution.

Basically I used two custom fonts on my website. One has a letter spacing of 0.05em to respect my psd file.

My font renders well on Chrome, Firefox, Internet explorer.. But for Safari, strangely, It does not work, the letter spacing does not render. I read somewhere that it could be a problem with webkit, but if it"s the case why would it be working on chrome ? It's really making the website horrible on safari and I need to find a fix.

I cannot believe that there is no possible fix for this.

If you have any idea it would be with pleasure.

Below are my code.

Css declaring the font:

@font-face {
    font-family: 'univers_lt_std_59_ultracnRg';
    src: url('fonts/univers-lt-std-59-ultra-condensed-webfont.eot');
    src: url('fonts/univers-lt-std-59-ultra-condensed-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/univers-lt-std-59-ultra-condensed-webfont.woff') format('woff'),
         url('fonts/univers-lt-std-59-ultra-condensed-webfont.ttf') format('truetype'),
         url('fonts/univers-lt-std-59-ultra-condensed-webfont.svg#univers_lt_std_59_ultracnRg') format('svg');
}

Css of my paragraph:

color: #57585a;
font-family: 'univers_lt_std_59_ultracnRg';
letter-spacing: 0.05em;
font-size: 19.58px;
text-transform: uppercase;
-webkit-font-kerning: initial;
line-height: 26.47px;

Rendering on Chrome Firefox, and Internet Explorer

Rendering on Safari

Clearly the letter spacing does not work..

If you have any idea thanks again.

Answer 1

Try using pixels instead of relative values for letter spacing. Also, use round numbers for font-size and line-height. Safari has been known to round differently.