why is letter-spacing for @font-face not working?

10
votes

I'm working on a multi-language site and have used @font-face to display the Burmese Font. All looks good except letter-spacing. Thus i tried to insert letter-spacing inside @font-face. But it has no effect. Using letter-spacing inside body or html or container pushes the letter-spacing for other fonts as well and that's not what i'm looking for. I just want to increase the letter-spacing for this Zawgyi-One font as shown below.

@font-face {
    font-family: 'Zawgyi-One';
    src: url('/fonts/Zawgyi-One.eot');
    src: url('/fonts/Zawgyi-One.eot?iefixa') format('eot'),
         url('/fonts/Zawgyi-One.woff') format('woff'),
         url('/fonts/Zawgyi-One.ttf') format('truetype'),
         url('/fonts/Zawgyi-One.svg#svgFontName') format('svg');
    font-weight: normal;
    font-style: normal;
    unicode-range: U+00-FF, U+980-9FF;
    letter-spacing: 0.30em!important;
}
1
cssfontsfont-facemultilingual

1 Answers

6
votes

Looks from the Mozilla docs that letter-spacing is not supported as part of the font-face definition.

That said, I would define the font face, then define a class to apply to objects with that font family declaration.

For example,

.zawgi-one {
  font-family: 'Zawgi-One';
  letter-spacing: 0.30em !important;
}