Font Library Creator

From FDT Documentation

Revision as of 01:51, 8 October 2010 by Aklement (Talk | contribs)
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 which glyphs or characters are included. Simply including ALL your fonts will unnecessarily bloat your application.


Download arrow.png Visit the Downloads page to download the source code used in this tutorial!


Contents

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

Nnavigate 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 explaining 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, when you import the class ALL the fonts are going to go with it. 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 all 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.

Wrap Up

FDT has many, many more features to be explored. Stay tuned for more tutorials!

Get FDT5