Fonts and Browsers Compatibilities

Hi,

I have problems with fonts in differences browsers. I embed the fonts with this code:

@font-face {
      font-family: 'FontName';
      src: url(Resources/fonts/FontName.ttf);    
      src: local('☺'),
      url('Resources/fonts/FontName.ttf') format('truetype');
}

Chrome: Work perfect
Firefox: Render fine but in different y position in game
IE: Don’t work this embed.

Can somebody give me hand ?
Thanks.

Different browsers would treat rendering .ttf differently, and I heard that IE doesn’t support custom .ttf you have to look at .eot file instead.

You have an option to use Bitmap font (by convert .ttf file into .fnt + .png file and use in your game). You can find a tool here http://www.angelcode.com/products/bmfont/.

FYI:
One side note is that, make sure you include only number of characters in font you need as for my experience I’ve included both local and English language including additional symbol (315 characters) with 4 different sizes, it’s pretty much slow in loading and in-game. Right now, I stick with LabelTTF class instead, and the performance is better than my previous case. If use .fnt, I believe just keep it only 1 file with low number of character.

Wasin Thonkaew wrote:

Different browsers would treat rendering .ttf differently, and I heard that IE doesn’t support custom .ttf you have to look at .eot file instead.
>
You have an option to use Bitmap font (by convert .ttf file into .fnt + .png file and use in your game). You can find a tool here http://www.angelcode.com/products/bmfont/.
>
FYI:
One side note is that, make sure you include only number of characters in font you need as for my experience I’ve included both local and English language including additional symbol (315 characters) with 4 different sizes, it’s pretty much slow in loading and in-game. Right now, I stick with LabelTTF class instead, and the performance is better than my previous case. If use .fnt, I believe just keep it only 1 file with low number of character.

Thanks Wasin,

Yes, I will continue changing all ttf with bitmapfont. These fonts are showing equal in all browsers.