How to handle non-default fonts on HTML games

[plicatibu]

I'm wondering how do you guys handle fonts in HTML games.

 

In Android it's just a matter of put the TTF in assets folder and load them.

 

 

Regards.

[YellowAfterlife]

You can use web fonts. With enough font files provided, most of target devices and browsers will be able to load the correct font.

There's also a workaround though - use bitmap fonts. That is, all relevant glyphs are rendered into a texture sheet, and then drawn accordingly to display separate characters. Implementations of popular formats like BMFont exist for most of commonly used frameworks.

Second method may require slightly more memory for larger fonts, but gives consistent results regardless of browser and device rendering specifics.

[onefrankguy]

If you already have the TTF, and own the redistribution and embedding rights for it, Font Squirrel will do the conversion to a webfont for you.

http://www.fontsquirrel.com/tools/webfont-generator

[plicatibu]

onefrankguy, thank you for the tip.

 

It will be very useful.

[spelagon]

I typically have this inline code in main html file:

        <style type="text/css">            @font-face {                font-family: "kenpixel";                font-weight: normal;                src: url("./assets/kenpixel.woff") format("woff"), url("./assets/kenpixel.otf") format("opentype");            }        </style>

woff is for Firefox if I remember correctly. Most other browsers can load otf fonts. There are many online tools to convert from ttf to these formats.