AllFlashWebsite.com: Tuturial: Embedding Fonts in Flash CS3 the Good Way

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:

package {
import flash.display.Sprite;
import flash.text.Font;
public class _Garamond 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");
}
}
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.

The Ultimate Font Loader (Added 01.09.2009)

After a back and forth with Ash in the comments below this post, I came away with two important insights:

This technique only works with relative paths.

You can download the ultimate font loader class here which fixes that problem and more

There are a couple of articles (FontLoader, Fontloader 2.0) at Russian blog ЗАПИСКИ О FLASH that describe this class and it’s various features. Ash told me that it allowed her to load fonts located using an absolute URL. By perusing the code, I also noticed that it can automatically load the fonts in an SWF without prior knowledge of the class names assigned the fonts. There’s also a really cool demo.

— Pickle

Comment

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 · #
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 · #
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 · #
bigtime help – thanks!

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

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

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 · #

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 · #
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 · #
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 · #
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 · #
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 · #
I’m not so sure it is a sandboxing problem as I am testing from within the Flash IDE. If i point to a Fonts.swf using a relative path, no problems. But if i point to http://localhost/Fonts.swf, they don’t get loaded in properly even though i can see the “Font Loaded” trace that is within the Fonts.swf. I think it should be fine though, my app is running from within a CMS where the path to the Fonts.swf is passed in on init and I am pretty sure it will be a relative path.

— Ash · Jan 6, 07:10 PM · #
Oh sorry I misread your comment… Have you tried this:
```
import flash.system.Security;
...
Security.allowDomain("localhost");
```
— Pickle · Jan 7, 05:23 AM · #
Yes. I have even tried Security.allowDomain(”*”) but no luck. I have run quite a few tests and from the results it looks like you must always use a relative path to load the fonts in. Perhaps this is like the shared library assets?

— Ash · Jan 7, 01:24 PM · #
Ok sorry again. I thought to actually try to replicate what you’re doing instead of making shots in the dark. I got:
```
ArgumentError: Error #1508: The value specified for argument font is invalid.
	at flash.text::Font$/registerFont()
```
This error is really fishy and a little bit of googling led me here and there

Have you ever gotten this error?

— Pickle · Jan 7, 08:05 PM · #
hi pickle,
Great tutorial. I tried to set the bold or italics for the text but failed. I changed the fontName to base font name like:

Embed(source=‘C:/WINDOWS/Fonts/GARA.TTF’, fontName=‘Garamond’, unicodeRange=‘U+0021-U+00A0,U+00C0-U+00C2,U+00C8-U+00C9,U+00CC-U+00CD,U+00D2-U+00D3,U+00D9-U+00DA,U+00E0-U+00E1,U+00E8-U+00E9,U+00EC-U+00ED,U+00F2-U+00F3,U+00F9-U+00FA,U+00E0-U+00E1’)]

and

tf.defaultTextFormat = new TextFormat(“Garamond”, 14, 0, true, true);

Is there any thing I am missing out?

— Ray · Jan 28, 11:07 PM · #
Ray, That’s the wrong file for Garamond Bold. Also add the fontStyle property… Oh and don’t forget the underscore…
```
Embed(source='C:/WINDOWS/Fonts/GARABD.TTF', fontStyle='bold', fontName='_Garamond', unicodeRange='U+0021-U+00A0,U+00C0-U+00C2')]
```
— Pickle · Jan 29, 07:39 AM · #
work like charm, thanks, pickle.

— Ray · Jan 29, 09:45 PM · #
Great post! I don’t think it was mentioned above here; but Flex uses three different font managers when embedding fonts into a SWF; not a problem for Garamond in your example but will be an issue if you try to embed Arial Unicode MS (among many others)…
The solution is to add the following as a compiler argument:
-managers flash.fonts.AFEFontManager
In flashDevelop, look under Project / Properties / Compiler Options / and add the above under “Additional Compiler Options”…
I just spent a couple hours figuring this out and thought I may save someone else the time ;)

— seany_on_craic · Feb 8, 10:01 AM · #
Tis a great tut!

But I too am having trouble trying to get it working with an absolute url to the fonts.swf.
The reason I need this is that the page is dynamically created with php and doesn’t actually exist statically, so a relative path to the fonts.swf is different for different dynamic pages.

Is passing a query string with the relative path the only way?

— dudan · Feb 19, 04:16 AM · #
dudan, try the Font Loader class mentioned at the end of the article.

— Pickle · Feb 20, 05:50 AM · #
Can someone give a small example of using the Fontloader 2 that can load the fonts from an absolute URL, I tried just loading the FontLoaderDemo but cannot seem to figure out how to call what I need to call to get it to load at all.

in a basic example I am hoping to know how to create a small project then add a text element with whatever font is available, and how do I know what fonts are available or change a font, like the demo does. Any help would be appreciated, apparently the code samples are confusing to me to read and I feel like a dimwit(alright now snide remarks) :-)

— Tim · Mar 6, 12:27 PM · #
Actually I think I also needed to add I want to add fonts to an MXML with the FontLoader 2 I got the FontLoaderDemo to load as an ActionScript Project but I can’t seem to just dynamically add text using the fonts to say a Canvas in an MXML project.

— Tim · Mar 6, 12:49 PM · #
I really don’t know any further. I tried your method I tried the super FontLoader. I’m still getting that nasty: ArgumentError: Error #1508: The value specified for argument font is invalid. at flash.text::Font$/registerFont()
I have a preloader.swf that loads in a main.swf. Now, when I load the font.swf from the preloader.swf it works, but how can I access them from my main.swf then? If I load the fonts.swf into the main.swf (which I’d prefer, because that’s where I need them)it throws the error. I used relative paths and even put them in the same folder and added Security.allowDomain(”*”).
Anyone any ideas, how I could solve this?

— mosha · Apr 18, 08:37 AM · #
I’ve solved it.
In my preloader.swf I had the following code at some point
…
applicationDomain = new ApplicationDomain(ApplicationDomain.currentDomain);

now, I changed it to just
…
applicationDomain = new ApplicationDomain();

And all of a sudden there was no error message anymore.

— mosha · Apr 20, 10:20 AM · #
good work, ive been using…

[Embed(source=‘C:/WINDOWS/Fonts/arial.ttf’, fontName=‘font1’)]
public static var font1:Class;

to embed my fonts although this uses all parts of the font and compiled file becomes very big

I used your code rather than the ultimate FontLoader etc, as its easy when things go wrong if you write it yourself!
in my case removing the parts from the font i didnt want a upper and lowercase arial saved me 300K over the [embed] statements I previously used thanks!

— richard · Apr 28, 10:38 PM · #
great tutorial, but is there any way getting this to work without using flash cs3? it works, when compiled with flash cs3 but when compiling with only flashdevelop/flex sdk the text just won’t show up. the textfield and the text however is there as it can be copied out of the textfield, but somehow the embedded font can’t be displayed.

— nervous breakdown · Jun 6, 01:33 AM · #
@nervous breakdown
Yes, I have this working with Flex SDK + FlashDevelop on several projects, it works fine.

— Pickle · Jun 7, 08:44 PM · #
@nervous breakdown
You have to set your textfield to [TextField].embedFonts = true;

— Mike · Jul 1, 08:19 PM · #

New AS3 Site Now Live Seamlessly Combining 2D and 3D in Flash with Planes, Part 2 [AS3]

Name		Remember
E-mail
Website
Message
	Textile Help

follow me on Twitter