Text objects misplaced in browser

I'm using Web Fonts in my game and I have problems with positioning of text objects.

For some reason all text objects are shifted a few pixels down when rendered, and the offset is different in different browsers.

See this image - same text in C2 editor, Chrome and Firefox:

I did some tests today and looks like not just Web Fonts are affected, the same problem is happening with system fonts too (for example Arial).

Changing Vertical Alignment property doesn't help.

Is there a way to fix this without converting all text to sprite fonts?

Here is the CSS

@font-face {
    font-family: 'luckiest_guyregular';
    src: url('luckiestguy-webfont.woff2') format('woff2'),
         url('luckiestguy-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}[/code:e86ivakn]

Am I the only one having this problem?

You are not alone - this is a known issue with the text object:

You'd hope at least that centering the alignment and hotspot would position the text accurately, but alas not.

The only solution for accurate positioning (as far as I'm aware) is sprite fonts but this isn't ideal in all circumstances - sprite fonts don't scale well, you can't add bold/italicised formatting without adding a whole new font set and new object, and it can be a hassle getting the kerning and line spacing correct.

Thanks, mekonbekon!

I tried searching the forum for this problem but somehow missed those posts.

I guess I'll have to use sprite fonts then..

spritefont+ plugin and SpriteFontGenerator tool help with some of the issues you mentioned.