Home

This post is unpublished! This means that it will not show on feeds or the main page. To publish your post, edit this page, find the field that says "Publish?", click on it, click on the Publish button, then save the page.

 

alt="Not

For many projects, it is important to use a customized font for the sake of characterization and personalization. However, if you are using OpenFL and Haxe, you will realize that the font they use is always some boring font that everyone has on their computer. In this post, we will look at how to use a custom font in your OpenFL project in a way that will work for as many targets (HTML5, Windows, etc) as possible.

Step 1: Create a Fonts Directory

Your first step is to create a directory in the assets folder called fonts. The fonts folder is where you will put all of the custom fonts that you wish to use. Note that you must at least have a TrueType Font file (ending in *.tff)! If you do not have a TTF version of the font, this embedding technique will not work.

Step 2: Add an <assets> Definition to project.xml

If you are using OpenFL, then you likely have a project.xml or application.xml file governing the compilation of your project. You can read more about this file at OpenFL's site.

What you need to do is tell the compiler to include the font as an asset. Do this by adding the following like to your project.xml file (anywhere):

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

Note that we are only specifying the HTML5 target here. We do this in order to truly embed fonts into every project except for HTML5 targets, which is not supported by OpenFL. You are in fact allowed to remove the specific target if desired.

Step 3: Create a Fonts Class

Now, create a class called Fonts in a file called Fonts.hx. This class will act as a font manager and will hold information for all of the fonts you wish to use. Make sure that your file imports openfl.text.Font.

package;
 
import openfl.text.Font;
 
class Fonts {
 
}

Step 4: Create a Class for your Font

Each font you wish to use will get its own class, and you can put all of these classes in the Fonts.hx file (the Fonts module, if you will). Each font class will look exactly like the below:

@:font("assets/fonts/FONTFILE.tff")
private class FontClassName extends Font {}

Of course, you replace FONTFILE.tff with the name of the font's file, and you replace FontClassName with the typename you wish to be associated with the file. The below is an example of a font class I have for the Raleway Font from Font Squirrel:

@:font("assets/fonts/raleway-extralight.ttf")
private class RalewayExtraLight extends Font {}

Step 5: Create a Variable for the Font

In the Fonts class, create a public static variable called FONT_NAME, as I did for the Raleway font below:

class Fonts {
    public static var RALEWAY_EXTRALIGHT(default, null):String;
}

This variable is used in order to retrieve the font's name when we use the font later on.

Step 6: Create an init() Method in Fonts

Now, create a public static function called init() in the Fonts class. This function will register the fonts for use later in the program and is meant to be called right when your program starts. The signature of this method is below:

public static function init():Void

Step 7: Register the Font in init()

Now you need to register the font in the init() function. We do this using the following code structure:

public static function init():Void {
#if js
    FONT_NAME = Assets.getFont("fonts/FONTFILE.ttf").fontName;
#else
    Font.registerFont(FontClassName);
    FONT_NAME = (new FontClassName()).fontName;
#end
}

Replace FONTFILE with the name of the font's file, FONT_NAME with the name of the font variable you created in Step 5, and FontClassName with the font class name you chose in Step 4. Do NOT replace fontName, however!

Using this structure, you can very easily add additional fonts as well. Just follow steps 4, 5, and 7 for each font you have!

Using the Font

Now that the Fonts class is set up, all you need to do is find how to use the font. Firstly, at the start of your program, you need to call
Fonts.init() in order to register the fonts.

Then, you can use your fonts with the TextFormat class in OpenFL, like the below:

var tf = new TextFormat(Fonts.RALEWAY_EXTRALIGHT);
var t = new TextField();
t.embedFonts = true;
t.defaultTextFormat = tf;
t.text = "Hello World!";

Note that if you are using the TextField class in OpenFL, you must set embedFonts to true! It is a common thing programmers miss when using custom fonts.

Example Fonts Class

Here is the entire Fonts.hx file I used for this tutorial:

package;
 
import openfl.text.Font;
import openfl.Assets;
 
class Fonts {
    public static var RALEWAY_EXTRALIGHT(default, null):String;
 
    public static function init():Void {
    #if js
        RALEWAY_EXTRALIGHT = Assets.getFont("fonts/raleway-extralight.ttf").fontName;
    #else
        Font.registerFont(RalewayExtraLight);
        RALEWAY_EXTRALIGHT = (new RalewayExtraLight()).fontName;
    #end
    }
}
 
@:font("assets/fonts/raleway-extralight.ttf")
private class RalewayExtraLight extends Font {}

And here is the Main class that uses this:

package;
 
import openfl.display.Sprite;
import openfl.Lib;
import openfl.text.TextField;
import openfl.text.TextFormat;
 
class Main extends Sprite {
    public function new() {
        super();
        Fonts.init();
 
        var tf = new TextFormat(Fonts.RALEWAY_EXTRALIGHT, 32);
        var t = new TextField();
        t.embedFonts = true;
        t.defaultTextFormat = tf;
        t.text = Fonts.RALEWAY_EXTRALIGHT;
        t.width = t.textWidth;
 
        this.addChild(t);
    }
}

Have Questions?

If you have any questions, feel free to ask in the comments below. Hopefully this little tutorial helps you use custom fonts in your project!

References:

  5

Add a New Comment