Font Library Creator

From FDT Documentation

Jump to: navigation, search
Font intro.png

Fonts can be a real pain, especially when working with an application that uses multiple languages or requires localization. Once you do decide the best way to include fonts with your application, you may want to have control over which glyphs or characters are included. Simply including ALL your fonts' glyphs and characters will unnecessarily bloat your application. The control over how many characters are embeded is an especially handy feature of the Font Creator.

For this tutorial, we'll go over different ways of using FDT's Font Library Creator to embed custom fonts into your application.


Contents

Source Files

Download soruce files.png

Getting Started

While not necessary, the sample project files for this tutorial will be very helpful in following along and understanding all the different ways of working with the Font Library Creator. Once downloaded and imported you'll see the three projects that are referenced in this tutorial.

015 001.png

When working with fonts on your own, keep this snippet handy to help you see what fonts are making it into your application:


if (Font.enumerateFonts().length) {
     for ( var i : int = 0; i < Font.enumerateFonts().length; i++ ) {
     trace('Font ', Font.enumerateFonts()[i].fontName, ' Has Been Found!');
     }
} else {
     trace('*********** Doh! No Fonts Found ***********')
}


This tutorial uses a slightly modified version of the above loop.

Embedding Via ActionScript Files

Let's start off with an error. This is actually a great way to start because solving it will give good insight to:

  • How embedding, via metadata tags, work
  • Why using relative embed paths is useful
  • When using the Font Library Creator, embedding via .SWCs or .SWFs may be better

Absolute Paths Are Evil

After importing the project, jump to your Run Configurations window (Run>Run Configurations) and you'll see all the run configurations associated with these projects Img preview.png. If you choose to run ASDemo - Single Font you'll most likely see this error:


Could not create file /Users/OSX/_dev/fdt/EmbedFontsAS/bin/Single.swf.
Build failed.


This is because when I used the Font Library Creator tool, it embedded the fonts based on where they were located on my machine. If you take a look at the took at the font ActionScript classes you'll see the embed code being used Img preview.png:


[Embed(source="/Users/OSX/_dev/fdt/EmbedFontsAS/assets/Quicksand.otf"...


When using the Font Library Creator Tool to create ActionScript font classes, it will locate the fonts on your computer and use that path to write the embed code. In order to get this example running, you'll need to adjust the path so it matches the location on your machine. Before going on let's fix that.

Locate Quicksand.ffl within the libs folder and double click on it. The window that opens in the Editor is the GUI for FDT's Font Library Creator Img preview.png. Once here, find the field for File Font and click the browse button:

015 006.png

Navigate to where the Quicksand.otf font is located on your machine (within the example project folder) and then hit Open Img preview.png. After the font is selected make sure you have the desired Character Set selected. This example is including the typical Uppercase, Lowercase, Numerals, and Punctuation - it should come out to 114 glyphs total. Click the Create Library button and FDT will generate a new QuicksandFont ActionScript class for you inside of the fonts folder.

015 008.png

When your file path is updated, run the ASDemo - Single Font run configuration and FDT will then embed your font into your application and run it Img preview.png.

Looking At The Code

Ok, so time to step back a bit and explain a little more about what's going on. As mentioned in the beginning of the tutorial, fonts and embedding of assets can be an entire lesson onto itself. So for now we'll just hit the important bits to know when using this technique:

  • In this case, The Font Library Creator is just creating a class for you and writing the embed code. If you're going to embed just one font family and don't mind embedding all of it, you might as well write your own embed code. This is really only helpful when you want to embed only certain characters because FDT automatically writes the unicode ranges for you.
  • In order to have the fonts available to use, you don't need to instantiate the class that FDT creates. Check out this code in Single.as:


public var font : QuicksandFont;


The above is all you need - simply importing the class will do the trick.

  • When you want to use the font, use the name you gave it within the ID field within the Font Library Creator:
015 010.png

In this example, the font was given a name of Quicksand. The syntax to use this font is:


text.defaultTextFormat = new TextFormat("Quicksand");


  • When you import a class that has multiple fonts embedded, ALL the fonts are going to be embedded. Looking at Many.as this line of code is importing the class:


public var myFonts : MyFonts;


If you then look at MyFonts.as you'll see embed code for two fonts - which will both be embedded with the class.

  • The compiler will be transcoding (or consider transcoding) the fonts EVERY time you compile.

All in all, there's not much reason to embed your fonts this way. Unless you have a specific reason, stick with .SWCs or loading your fonts at runtime.

Using Font SWCs

Using SWCs is my favorite way of using custom fonts with my applications. This is because:

  • FDT won't need to transcode the fonts at compile time
  • You can pick and choose which fonts you want to use - or import all of them with one line of code
  • They are more transportable - you don't need to have the font files in order to use them

There is one drawback however. You won't get code hinting within FDT for the font names. To get the font names you'll have to either look at the classes inside the .SWC or look at the ,ffl file to see what they were named at compile time.

Looking At The Code

015 011.png

Here you can see the Font Library Creator when creating a .SWC as well as the resulting .SWC (MyFonts.swc). Within the .SWC, you'll see these classes:

015 013.png

These are actually what you'll need to import to use these fonts.

To import all the fonts in the .SWC, for this example, you'd use the top one:


public var myFonts : FontClass_11da7c36c5aafac8;


The other two classes with font0 and font1 suffixes are the individual fonts.

As mentioned before, if you end up with one of these .SWCs and are not sure what ID was given to each font, so you can assign it to a textfield, open one of the classes inside the .SWC and note the fontName property of the embed code and use that.

015 014.png


As a last tip, you don't even need to create a variable to include a font. This syntax will work just as well:

public class Single extends Sprite {
		public var offset : Number = 0;
		FontClass_11da7c36c5aafac8_font0; 
                 public function Single() {
			check_for_fonts();
		}

Using Font SWFs

The real advantage for using font .SWFs over font .SWCs is when you want to load fonts at runtime. This is handy if you want to dynamically change the fonts of your application or want to use a custom loading scheme. You can also embed font .SWFs at compile time as well.

Embedding

If you want to embed the fonts at compile time, use this syntax:


[Embed( source="/MyFonts.swf", fontFamily="Quicksand" )]
private var font1 : Class;
[Embed( source="/MyFonts.swf", fontFamily="RondaSeven" )]
private var font2 : Class;


Take note that the variable type or name is not important, but what is important is the font name (ID) that was used when the font .SWF was created. The tricky thing is that if this .SWF was just given to you, you're not going to know what fontFamily to look for. In order to find out use that loop code included at the beginning of the article to scan your .SWF at runtime to see what you've got. If you were given the .ffl file as well, you can look in there to see what IDs were used.

Loading At Runtime & The Gotcha

To use the fonts at runtime, simply use a simple loader to load in the font .SWF. When then .SWF is loaded into the VM, the fonts will be available within the application domain.

BUT!

In order to use these fonts, you're going to need one utility class:


mx.core.FontAsset;


The easist thing to do is just to reference the class in your code. Here I just added this one statement to my font .SWF loaded event hander:


private function get_fonts(event : Event) : void {
     FontAsset;     check_for_fonts();
}


Once this is done, you can just refer to the font ID that it was assigned in order to use it with a text field.

Check out the supplied project EmbedFontsSWF to see working examples of this.

Wrap Up

Whew, that was a lot to go over. As can be seen, font embedding can be tricky, but FDT's Font Library Creator really does help out a lot, especially when you want to just include specific glyphs or characters with your font sets.

Happy embedding.

Get FDT5