Tuturial: Embedding Fonts in Flash CS3 the Good Way · Sep 6, 10:56 PM

This is an old topic, but it needs to be said. Embedding fonts in CS3 is very easy, but the documentation on this topic is lacking. Most people embed their fonts by creating a Font in the Library. Unfortunately, this method can lead to immense file sizes especially when you are embedding fonts with many different characters (like Chinese fonts). You can shave 100’s or 1000’s of kilobytes off by embedding only the characters your flash app actually needs.

Download Source Code and Example (Added 09.09.08): FontLoader.zip

Prerequisites

You must have FlashDevelop installed. FlashDevelop is free, although if you’ve got the big bucks, you could also use FlexBuilder or FDT. (09.19.08: if you can’t use FlashDevelop, read the comment by startpause)

Step 1: Install Flex 3

Truth is, in order for this to work we are going to have to compile our fonts using the Flex compiler. You can download the Flex 3 Compiler for free. After you install Flex installed, FlashDevelop makes compiling with it a snap. If you don’t have it already, download it and install it. In FlashDevelop, goto Tools>Program Settings>AS3Context and under the Language section, enter the path to the Flex 3 SDK.

Step 2: The Weird Part

Update 11.30.08: I just downloaded and installed the latest Stable release of the Flex 3 SDK (version 3.2.0.3794). This release seems to fix the bug that required this step. If you have the latest version of the SDK you can now skip this step…

There is some sort of Flex bug that requires you to complete this step, but you’ll only ever have to do this once. Using a text editor, open C:\flex_sdk_3\frameworks\flex-config.xml (the exact location of this file may vary depending on where you installed Flex). Find Line 146:

          <advanced-anti-aliasing>true</advanced-anti-aliasing>

Change true to false:

         <advanced-anti-aliasing>false</advanced-anti-aliasing>

Now save flex-config.xml.

Step 3: Create Character Set

You can use the Windows charmap utility to lookup unicode ranges for the characters you want to embed. For example, all uppercase english letters are in the range U+0041-U+005A (where A is U+0041 and Z is U+005A) and all lowercase English letters are in the range U+0061-U+007A (where a is U+0061 and z is U+007A).

Therefore, the character set of all uppercase and lowercase letters is:
U+0041-U+005A,U+0061-U+007A

Step 4: Create Project _Garamond.as3proj

In FlashDevelop, create a new AS3 Project. We are going to embed the Garamond font, so name the project _Garamond. Use the convention of adding an underscore before the name of the font to prevent any naming conflicts.

Step 5: Create ActionScript Class _Garamond.as

Add an AS file to the project called _Garamond.as. Right-click _Garamond.as in the Project pane and enable Always Compile. Finally, enter the following code:

  1. package {
  2. import flash.display.Sprite;
  3. import flash.text.Font;
  4.  
  5. public class _Garamond extends Sprite {
  6. [Embed(source='C:/WINDOWS/Fonts/GARA.TTF', fontName='_Garamond', unicodeRange='U+0041-U+005A,U+0061-U+007A')]
  7. public static var _Garamond:Class;
  8. Font.registerFont(_Garamond);
  9. trace("_Garamond LOADED");
  10. }
  11. }
  12. Download this code: /files/code-garamond.txt

To embed a different font, you would just name the file _Font.as and change _Garamond on lines 5,6,7,8,9 to _Font. Line 6 has a source attribute that specifies the location of the font file, as well as the unicodeRange attribute that specifies the set we came up with in step 3.
Note: Only TTF files are supported.

Step 5: Compile The Font

In FlashDevelop, click the Build Project button. If you did everything correct, the FlashDevelop Output pane will report Build succeeded.

Conclusion

The SWF file you end up with will contain your new embedded font. Now, all you have to do is load the SWF file into your app using the Loader class as usual. Don’t try to do anything with the file other than load it in. As soon as it’s loaded, you should see _ Garamond LOADED in the Trace panel. After it’s loaded, you can use the font in any control that has embedFonts enabled. Compile multiple fonts by creating a new Project for each font, this way you can selectively load fonts as you need them.

Using OTF Fonts (Added: 10.13.08)

Flex unfortunately won’t compile OTF fonts. The solution is to convert an .OTF font to a .TTF font. The quickest solution I have found is to convert OTF fonts using FontForge. To use FontForge on Windows, download FontForge for MinGW. The webpage for the MinGW version is in Japanese, but don’t sweat it, just download the file named fontforge-mingw_2008_10_01.zip. After you unzip this archive, run fontforge.bat. When the file chooser pops up, select your OTF file. Once the font is loaded, click Element>Font Info, then switch to the General section. Change Em Size to one of: 1024, 2048, 4096 and click OK. Now click File>Generate Fonts…. In the Save window, click the button under and to the left of the file name, choose TrueType and click Save. When I clicked Save I received some warnings/errors but the font was created successfully anyway.

Note: You can use FontForge to convert many different file formats to TTF.

— Pickle

---

Comment

  1. Hi Pickle
    How is this method better than simply creating a dynamic textfield on the stage of your custom font fla, and indicating which characters to include? Or is this method simply useful if you’re NOT using the Flash IDE to compile?

    — jim · Sep 17, 01:17 AM · #

  2. jim,

    Runtime Dynamic Fonts: it’s all about file size. If you embed characters in a dynamic textfield, they are not available at runtime, which means you may end up embedding the same font more than once, wasting space.

    I think that if your app consists of just one .swf and some textfields dragged to the stage (not created in code) then there may be no advantage to this technique. However, most interesting programs don’t fit this mold.

    — Pickle · Sep 17, 06:21 AM · #

  3. thanks for this howto guide! very cool to register the font in the _fontClass.as rather than the .as that is loading the font (as opposed to the yui example).

    i have one more tip that simplifies things & takes FlashDevelop out of the Prerequisites: compile your _FontName.swf files from the command line like “mxml -use-network=false c:\asFonts\_Arial.as”

    the use-network flag is to avoid security errors when testing locally.

    — starpause · Sep 18, 06:53 PM · #

  4. bigtime help – thanks!

    Any way to embed multiple fonts in one swf using this method?

    — David J McClelland · Dec 10, 08:49 AM · #

  5. David,
    pretty much the same thing as before, here’s how you would embed Garamond and Book Antiqua Bold… (another thing i should point out here is that for bold, italics, etc set the fontName the same as the base font)

    package {
	import flash.display.Sprite;
	import flash.text.Font;

	public class MyFonts extends Sprite {
		[Embed(source='C:/WINDOWS/Fonts/GARA.TTF', fontName='_Garamond', unicodeRange='U+0041-U+005A,U+0061-U+007A')]  
		public static var _Garamond:Class;
		Font.registerFont(_Garamond);
		trace("_Garamond LOADED");

		[Embed(source='C:/WINDOWS/Fonts/Antquab.ttf', fontName='_Book Antiqua', unicodeRange='U+0041-U+005A,U+0061-U+007A')]  
		public static var _BookAntiquaBold:Class;
		Font.registerFont(_BookAntiquaBold);
		trace("_Book Antiqua Bold LOADED");
	}
}

    — Pickle · Dec 10, 05:08 PM · #

  6. That’s weird I just noticed that the registerFont and trace functions are being called from outside a function. Why doesn’t this throw any errors?

    — Pickle · Dec 10, 05:12 PM · #

  7. I got the following code working which compiles to a file called Fonts.swf

    package {
    import flash.display.Sprite;
    import flash.text.Font;
    public class Fonts extends Sprite
    {
    [Embed(source='C:/WINDOWS/Fonts/ARIALUNI.TTF', fontName='DefaultFont')]
    public static var DefaultFont:Class;
    Font.registerFont(DefaultFont);
    trace("DefaultFont embedded")
    }
    }

    I am testing my movie from within the Flash IDE and can import the Font.swf and apply the embedded fonts to my textfields, however when i try and load from a url such as http://localhost/Fonts.swf it doesn’t work. I have traces to show when the Loader starts and finishes, and the “DefaultFont embedded” trace in the Fonts.swf works but I can’t see my embedded fonts. Any ideas as to what is causing this problem?

    — Ash · Dec 16, 02:58 PM · #

  8. Ash, This ussually means that you are trying to use your font before it is actually loaded. Make sure you are not jumping the gun. I should point out that when I test locally I use relative paths so I can’t say anything about that specifically. Something other things to try:

    Make sure your TextField statements appear in this order:

    text.embedFonts = true;	text.defaultTextFormat = ...;
text.text = ....;

    You might try using BulkLoader:

    loader.add(fontFile,  { context: new LoaderContext(false, ApplicationDomain.currentDomain); } );
loader.addEventListener(BulkLoader.COMPLETE, onAssetsLoaded);
loader.start();
// add event listener here

    — Pickle · Dec 17, 09:32 AM · #

  9. Thanks for the suggestions pickle.

    I am loading the fonts in during the start up of the application before any visual components are created so i’m using the font before it is loaded. The application is using PureMVC and i have a sequence of startup commands. The application is all pretty much pure as3 with a few library items that only contain graphics and no text fields (all text fields in the app are created thru code).

    It works great when loading the font swf from a relative path but as soon as i change it to a web based path e.g. http://localhost/Fonts.swf it fails.

    I am doing a trace

    trace(Font.enumerateFonts())

    in the loading completed handler and it shows up when using relative paths and is blank when using absolute paths.

    I am also using Charles Web Proxy and i can see my font swf being loaded and can also explore the swf in charles and see that it contains my font.

    Perhaps it’s something to do with LoaderContext /applicationDomain? i don’t have my head completely around these yet but I have had a look and tried a few things but still no luck. I’ll keep trying, if anyone has suggestions, please let me know.

    — Ash · Dec 23, 02:14 PM · #

  10. Pure AS3 projects can be a pain. If you are testing from your local machine to a remote server than you’ll run into sandboxing problems. Even if you are testing from the same machine if you are running from a local path, but referencing an SWF on localhost the Flash player will become upset. Both your original SWF and the loaded SWF needs to be run from localhost. If you test from the Flash IDE security sandboxing is not a problem.

    — Pickle · Dec 24, 07:22 AM · #

Textile Help