Skip to content

Font embedding in Haxe/ OpenFL

March 27, 2014

Many hours and a few days later, I’ve just about tackled another Haxe bugbear – font embedding. Basically, it didn’t work in html5 at all with the old backend for reasons I never did figure out, but does work in the new, bleeding edge html5 backend released just 9 days ago.. so that’s what I’m having to use. Real canary-in-the-coal-mine territory here.

Only small snag is that the approach used to embed fonts in html5 crashes the flash build. Luckily, you can work around that thanks to the tags that Haxe has for compiling or ignoring code based on target platform.

So, without further waffling, here’s some code that works, for everything. I spent ages figuring this out with basically no documentation and a frustrating AddingText sample that didn’t want to work when I threw my own font file at it. So, if you’re having similar problems, here’s a no-nonsense guide on how to work around it and get on with making your app or game.

 

Put this  in your Main class, after your imports:

#if js
@:font("Assets/fonts/nameofyourcrazyfont.ttf") class DefaultFont extends Font {}
#end

And then, this in your Main constructor:

#if js
Font.registerFont(DefaultFont);
#end

 

That will embed the font properly on html5 targets (not required at all for all other targets and causes problems with them, hence the #if js wrapper).

And, for the second part, here’s the code for creating a TextFormat, which of course, you can then apply to a TextField:

 

public static var name_of_your_crazy_font:Font = Assets.getFont("assets/fonts/nameofyourcrazyfont.ttf");

#if js
var body_text_format = new TextFormat ("nameofyourcrazyfont");
#else
var body_text_format = new TextFormat (name_of_your_crazy_font.fontName);
#end

And that’s it sorted! Font embedded on all platforms, including the new pixi.js-based one which is currently in an serious state of beta, but hopefully will be worked on a lot and fixed up over the next month or two. Note that this code might not work on the old backend with your font. It didn’t with mine, which is why I had to figure all this out in the first place.

 

I’m hoping this will be the last cross-platform problem I have to deal with for a while.. after a week with Haxe I’d like to get on with making the game rather than wrestling with the platform!

Advertisements

From → Game Development

4 Comments
  1. Xavier permalink

    THANKS for awesomely figuring this out!!

    My text was showing up just fine on my native app, but then on Android it wouldn’t appear. I had previously had the same issue on native app after a Haxe update, when I figured out the embed stuff. Weird little issues that come up in Haxe.

    Good luck with your game!

  2. Hellow, Do you know if there is way that’s possible to use Font.register with flash target, to make the font avaiable in all applicationDomain? By my experience your method is the only one that works, If you know something about it can you tell? Thanx

    • I’m afraid I’m not sure what you mean, but be sure to check the part2 of this post because things have recently changed.

  3. Thank you for sharing, helped me a lot!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: