62. Embedding fonts in OpenFL

2014-11-02

There's a high chance that you'll want to use a custom font in your app or game, and it's one of those things that might take a bit of time to get working, so I wrote this short tutorial to demonstrate how to properly embed fonts in OpenFL.

I'm going to be utilizing the Assets class to load the font itself and use it to render text in a TextField.

Firstly, put your OTF or TTF font in the assets/fonts/ directory.

Make sure the application.xml file has the path to the fonts directory by adding the following line (if it doesn't already exist):

<assets path="assets/fonts" rename="fonts" />

You don't really use the font on its own in an OpenFL application, but you apply it to a TextFormat instance which is later used to render fonts in TextFields.

If you have multiple UI components that use the same font formatting, you'll want to reuse the existing TextFormat object. One way is to store these instances in static variables.

For example, if you made a class called MenuButton and use it numerous times to add buttons to your application, you can define a common static TextFormat inside MenuButton:

public static var MENU_BUTTON_FORMAT:TextFormat = new TextFormat(Assets.getFont("fonts/myFont.otf").fontName,

 	50, 0xffffff, null, null, null, null, null, TextFormatAlign.CENTER);

This way there will only be one TextFormat instance, which you can then reuse in all MenuButton objects.

Note the first parameter of the TextFormat constructor - the value is the name of the actual font, which can be entered either as a String, or taken from the fontName property of the embedded font.

You can later use this TextFormat instance as a default text format for a TextField:

txt = new TextField();

txt.defaultTextFormat = MENU_BUTTON_FORMAT;

This will make sure that all of the text that is added to this field in the future will use this format.

You can also use the setTextFormat() method to use a font once - this way you can change the text format of a specific part of the text field, by specifying the beginning and ending character indices.

txt.setTextFormat(MENU_BUTTON_FORMAT, 0, 5);

Similarly, you can get the text format that's used in the character range.

txt.getTextFormat(0, 5);