Rodney Pillay's Blog

Just another WordPress.com site

FontSwf Utility in FLEX SDK 4

with 3 comments

I came across fontswf.bat while going through the flex bin directly and realized that this will be a very useful tool especially to those that use embedded fonts.

fontswf.bat is just a wrapper for flex-fontkit.jar which exists inside the Flex SDK 4 lib folder, and being a windows user, I appreciate the batch file 🙂

Usage
The usage is fairly simple and running fontswf.bat without any parameters will display a list of options, but let me try and expand on it and give a working example.

Options

-a, -alias [name] – set the font alias (defaults to font family)
The alias is the name that you will reference the font by inside your AS3 application.

-b, -bold – treat the font as bold
If you use this option and the font supports bold, you will be able to use the font as regular and bold.

-i, -italic – treat the font as italic
If you use this option and the font supports italic, you will be able to the font as regular and bold.
If you choose both -i and -b, and the font supports both options then you will be able to use the font as regular, bold, italic, regular-italic and bold-italic.

-o, -output (file path) – specify the SWF output file path

-u, -unicode-range (range) – set a unicode character range (default is ‘*’ which includes all characters)
If you want to embed all glyphs, don’t use -u, the utility will automatically embed everything.

-3 – generate DefineFont3 SWF tag
If you are using the original Flash TextField then you have to use DefineFont3

-4 – generate DefineFont4 SWF tag (default)
If you are using Vellum components then you have to use DefineFont4 (Gumbo components use Vellum)

Check out this article for a deeper look at DefineFont3 and DefineFont4

Example
Assuming that I am using the original TextField, I have a directory myfonts on my c drive and I want to embed the Comic Sans MS font.

Create myComicFont.swf
Copy the target font from your windows fonts folder into your myfonts directory.

C:\flex_sdk_4\bin>fontswf -3 -a myComic -o c:\myfonts\myComicFont.swf C:\myfonts\Comic.ttf

you will now notice a myComicFont.swf created inside your myfonts directory.

Now, you can either embed the font swf or load it at runtime

Sample AS3 code embedding and using the font swf

package
{
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.text.Font;
    import flash.text.TextField;
    import flash.text.TextFieldAutoSize;
    import flash.text.TextFormat;

    public class Main extends Sprite
    {

      public function Main():void
      {
        if (stage) init();
        else addEventListener(Event.ADDED_TO_STAGE, init);
      }

      [Embed(source="C:\\myfonts\\myComicFont.swf",      symbol="myComic")]
      private var _fontClass:Class;

      private var _alias:String = "myComic";

      private function init(e:Event = null):void
      {
        removeEventListener(Event.ADDED_TO_STAGE, init);

        Font.registerFont(_fontClass);

        var tf:TextField = new TextField();
        tf.defaultTextFormat = new TextFormat(_alias);
        tf.embedFonts = true;
        tf.autoSize = TextFieldAutoSize.LEFT
        tf.text = "The quick brown fox jumps over the lazy dog. 1234567890";

        addChild(tf);
      }
    }
}
Advertisements

Written by rodneypillay

May 18, 2010 at 11:14 AM

3 Responses

Subscribe to comments with RSS.

  1. Hi,
    works well – however I wasn’t able to figure out
    how to use the font.swf loading at runtime.
    when I try event.target.applicationDomain.getDefinition(‘FontSymbol’) I get an ReferenceError.
    Do you have an example for runtime loading or can you explain to me how I can get the class Definition for the loaded font?
    Cordially,
    Axel

    Axel Huizinga

    February 5, 2011 at 7:24 AM

  2. Nice tip.. thanks for sharing 🙂

    Chetan Sachdev

    March 4, 2011 at 1:25 PM

  3. Any idea how I might create a single swf w/ multiple embedded fonts this way?

    Brandon

    March 31, 2011 at 7:52 PM


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: