@font-face displays different letter-spacing for different files

We have some non-standard webfonts (wich we have a license for) and we received the .otf version of that font. There are some online tools to convert the fonts to the web-formats and then with some css you can include the fonts, so far so good.

However when displayig text in different browsers the renderd text is wider/smaller and the word-spacing varies also. I tested to be sure the fonts are actually used in the different browsers, and that all works fine.

There are 4 font files needed to support all browsers out there, and it seems each 开发者_开发问答file has its own inherited letter-spacing and word-spacing for each font-size used.

in case you want to see the include statement here it is:

@font-face {
    font-family: 'myfont';
    src: url('myfont.eot?') format('eot'), 
         url('myfont.woff') format('woff'), 
         url('myfont.ttf')  format('truetype'),
         url('myfont.svg#webfontaAipHhrc') format('svg');
    }   

I think the best way to deal with this problem is te generate the fonts in the defferent formats with the same word- and letter- spacing, only i have no idea how to accomplish that.

Fonts internally use EM as glypth width. So it made sense to me to set the document font-size to some value and have the used fonts scale accordingly, and then set a font-size for each element in wich i use the font.

Also setting the letter- and word- spacing in the @font-face definition has no effect because it is the adjustment of the font's own spacing that is set.

Anyone maby know of a font-generator who has the same word- and letter spacing for each of the generated fonts? Or has some other sollution/suggestion?

I tried 2 font generators, but only remember the last one, http://www.fontsquirrel.com/fontface/generator

Also while were at it, anyone know how to test if all languages (utf-8 characters) can be printed given the font? I tried printing a bunch of utf-8 characters to see if they can be displayed but ofcourse i dont know all languages so i have no idea if its ok or not.

Thanks :)

EDIT:

i made printscreens of how the different browsers i use render the fonts

http://www.imagedump.nl/img9/8589/15fonts.png

ths css used:

.test {
    font-family: myfont;
    font-size: 20px;
    letter-spacing: -0.67px;
    word-spacing: 1px;
}

the thing im looking for is to have some default starting position where all browsers render the font the same

with the 'different' part i ment that a browser like ff renders the text different than a browser like ie, who both use a different generated font file. but also there is a difference in chrome vs. ff when they are both use-ing the same generated font file (woff)

---

There isn't enough detail in your question to understand the issue. The browsers do use the font's internal spacing. It is not 'different' depending on where it is shown.

That said, the hinting applied to a font can influence its display on Window's browsers as it tries to fit the font outlines into the pixel grid. By doing this, the whole font can grow/shrink horizontally as it tries to fit in the grid. I have seen that.

Could this account for what you are seeing? Otherwise I'd like to see side-by-side screenshots so I can understand what it is you are talking about.

---

To solve this it would be, in my mind, appropriate to simply use some browser specific instructions on how to render the font. I am not proficient enough to know the CSS for a browser specific styling on the p and h tags which would work in this instance.