Full code after the jump.

OK, so the first question you may have is: “Sounds great, but why would I want to embed a font in my Flex application?”. Reasonable question, and I’m glad you asked. Well, perhaps you want to rotate some text, or set the alpha on some text so it is semi-transparent. In order to do either of these things you need to embed a font face into your Flex application. But as you may expect, embedding fonts and additional assets make your SWF file sizes bigger, so you should be aware of a few small details before you go embedding a number of fonts in your applications.

Lets start off with a simple example. Consider the following code:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/24/specifying-custom-named-unicode-ranges-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Style>
        @font-face {
            src: local("Base 02");
            fontFamily: Base02Embedded;
        }
    </mx:Style>

    <mx:Label text="The quick brown fox jumped over the lazy dog."
            fontFamily="Base02Embedded"
            fontSize="16"
            rotation="15"
            truncateToFit="false" />

</mx:Application>

This code defines a @font-face style in an <mx:Style /> block. Note that it only specifies a src attribute and fontFamily style. What the code is doing is embedding the whole available unicode range for the Base02 font.

If you export a release (non-debugging) version of the previous example, the SWF is 272,788 bytes (approximagely 266 KB). By comparison, if you didn’t embed a font into your application, the SWF size would only be 152,415 bytes (approximately 148 KB, or 55% of the embedded font example SWF file size).

So, what can we do if we want to embed a font, but not increase the size of our SWF file significantly? Correct, you can specify unicode ranges! Note that we have a few options:

1) The following unicode range specifies the whole range of uppercase, lowercase, symbols and punctuation:

unicode-range: U+0021-U+007B;

2) The following unicode range specifies all uppercase, lowercase characters as well as numbers:

unicode-range:
    U+0030-U+0039, /* 0-9 */
    U+0041-U+0051, /* Uppercase A-Z */
    U+0052-U+007A; /* Lowercase a-z */

3) The following unicode range specifies only the letters used in the string being displayed:

unicode-range:
    U+0054-U+0054, /* T */
    U+0061-U+007A, /* a-z */
    U+002E-U+002E; /* . (period) */

So now that we have a slightly better understanding of font embedding and unicode ranges, lets look at setting up our own custom ranges so we can specify unicode ranges by name instead of slightly cryptic unicode numbers.

First, locate your flex-config.xml XML document in your particular Flex SDK framework directory of choice. It should be located in your particular Flex SDK’s /frameworks/ directory. If you are using Flex Builder 3 standalone on Windows, that path would probably look something like the following:
C:\Program Files\Adobe\Flex Builder 3\sdks\3.0.0\frameworks\flex-config.xml

Open up the XML file in your XML editor of choice. If you consider yourself a somewhat unlucky person, you may want to make a backup of the file before editing it. Scroll down until you find a section under <fonts>, then, locate the child node <languages>. You can see that there is currently a single language-range specified, although it is currently commented out. By default, the XML we’re interested in should look like this:

<languages>
    <language-range>
        <lang>englishRange</lang>
        <range>U+0020-U+007E</range>
    </language-range>
</languages>

Note that it specifies a <language-range /> node with the custom name “englishRange” and a unicode range of U+0020 through U+007E. To use this range, simply uncomment the XML node, and save the file. Note, you may need to clean or recompile your project in Flex Builder. At this point, you can do something like the following in Flex Builder:

<mx:Style>
    @font-face {
        src: local("Base 02");
        fontFamily: Base02Embedded;
        unicode-range: englishRange; /* was: U+0020-U+007E */
    }
</mx:Style>

As you can see, using a named custom unicode-range is a lot simpler, easier to remember, and a lot more reusable.

Similar to defining unicode ranges in your <mx:Script /> blocks, you can specify multiple ranges in your flex-config.xml file by separating the ranges with commas, as seen in the following snippet:

<language-range>
    <lang>UpperLower</lang>
    <range>U+0020, U+0041-U+005A, U+0061-U+007A</range>
</language-range>

This code embeds the space character (U+0020), uppercase characters (U+0041 to U+005A), and lowecase characters (U+0061 to U+007A). Then, to use the new range in your Flex applications, you can use the following snippet:

<mx:Style>
    @font-face {
        src: local("Base 02");
        fontFamily: Base02Embedded;
        unicode-range: UpperLower;
    }
</mx:Style>

If you want to specify multiple custom unicode ranges, simply add more children to the <languages /> node in the flex-config.xml file, as seen in the following snippet:

<languages>
    <language-range>
        <lang>englishRange</lang>
        <range>U+0020-U+0026, U+0027-U+007E</range>
    </language-range>
    <language-range>
        <lang>Uppercase</lang>
        <range>U+0020,U+0041-U+005A</range>
    </language-range>
    <language-range>
        <lang>Lowercase</lang>
        <range>U+0020,U+0061-U+007A</range>
    </language-range>
    <language-range>
        <lang>Numerals</lang>
        <range>U+0030-U+0039,U+002E</range>
    </language-range>
    <language-range>
        <lang>Punctuation</lang>
        <range>U+0020-U+002F,U+003A-U+0040,U+005B-U+0060,U+007B-U+007E</range>
    </language-range>
    <language-range>
        <lang>Basic Latin</lang>
        <range>U+0020-U+002F,U+0030-U+0039,U+003A-U+0040,U+0041-U+005A,U+005B-U+0060,U+0061-U+007A,U+007B-U+007E</range>
    </language-range>
</languages>

You may have noticed that last language-range, “Basic Latin”, had a space in the name. In order to use the custom unicode range in your Flex application, simply wrap the name in double-quotes, as seen in the following snippet:

unicode-range: "Basic Latin";

There you have it, using named unicode ranges in your Flex applications. For a few samples of common unicode ranges, check out the flash-unicode-table.xml XML file in the same directory as your flex-config.xml file. If you are using Flex Builder 3 standalone on Windows, that path would probably look something like the following:
C:\Program Files\Adobe\Flex Builder 3\sdks\3.0.0\frameworks\flash-unicode-table.xml

One last word of advice. Since your flex-config.xml file is unique to each installed SDK, you may need to make the same changes to both your Flex 2.0.1 SDK builds and Flex 3 builds if you switch between SDKs regularly. Also, if you download nightly builds from the Flex 3 SDK nightly builds download page on the Adobe Labs site, you may need to back up your flex-config.xml file before overwriting the currently installed SDK directory.

Happy Flexing!

 

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/21/customizing-the-flex-datechooser-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        @font-face {
            src: local("Base 02");
            fontFamily: Base02Embedded;
            unicode-range:
                U+0030-U+0039, /* 0-9 */
                U+0041-U+0051, /* Uppercase A-Z */
                U+0052-U+007A, /* Lowercase a-z */
                U+002F-U+002F; /* slash (/) */
        }

        DateChooser {
            cornerRadius: 0; /* pixels */
            headerColors: black, black;
            borderColor: black;
            themeColor: black;
            fontFamily: Base02Embedded;
            todayColor: red;
            todayStyleName: myTodayStyleName;
            headerStyleName: myHeaderStyleName;
            weekDayStyleName: myWeekDayStyleName;
            dropShadowEnabled: true;
        }

        .myTodayStyleName {
            color: white;
        }

        .myWeekDayStyleName {
            fontWeight: normal;
        }

        .myHeaderStyleName {
            color: red;
            fontSize: 16;
            fontWeight: normal;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            import mx.formatters.DateBase;

            private function dateChooser_init():void {
                dateChooser.dayNames = DateBase.dayNamesShort;
            }
        ]]>
    </mx:Script>

    <mx:DateChooser id="dateChooser"
            initialize="dateChooser_init();" />

</mx:Application>

View source is enabled in the following example.

Base 02 font by www.stereo-type.net.

For an example of using embedded fonts with the Flex DateField control, see “Embedding fonts for the Flex DateField control”.

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/16/embedding-fonts-for-the-flex-datefield-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Style>
        @font-face {
            src: local("Comic Sans MS");
            fontFamily: "ComicEmbedded";
            fontWeight: normal;
            unicode-range: U+0030-U+0039, /* 0-9 */
                U+002F-U+002F; /* slash (/) */
        }

        @font-face {
            src: local("Comic Sans MS");
            fontFamily: "ComicEmbedded";
            fontWeight: bold;
            unicode-range:
                U+0030-U+0039, /* 0-9 */
                U+0041-U+0051, /* Uppercase A-Z */
                U+0052-U+007A; /* Lowercase a-z */
        }
    </mx:Style>

    <mx:DateField id="dateField"
            fontFamily="ComicEmbedded"
            color="red" />

</mx:Application>

View source is enabled in the following example.

 

Full code after the jump.

Before we get too far, we’ll quickly look at some of the font basics. If you’re a Windows user, a good place to start is with the Character Map application. Its a little Window’s utility that gets installed on most modern operating systems and lets you quickly browse a font’s supported characters, different character sets, filter characters by Unicode subranges, search for certain characters (such as © or ®), see a characters Unicode value as well as character code. It also lets you quickly copy certain characters to the clipboard for easy copy-pasting between applications. Because I can never remember where the application gets installed, or where to find its icon, it is usually just easiest to type “charmap” from a command prompt. If you have a modern-day keyboard, hit Windows+R to bring up the Run dialog, type “charmap”, hit Enter, and get ready to be amazed! Most of the features I mentioned before are cleverly hidden behind the “Advanced view” checkbox, so if you’re feeling up to the challenge check that checkbox to go to advanced view, otherwise the basic view will do just fine for now. At the top of the Character Map application is a Font drop down menu which lists all the fonts you currently have installed on your system. If you just downloaded a TrueType font (TTF) and didn’t install it into the Fonts directory (C:\Windows\Fonts by default), it won’t be listed here. Don’t worry if your specific font isn’t listed here, it isn’t the end of the world. Select any old font and click around.

If you want to embed the numbers 0-9, you would click on “0″ and note it’s Unicode value (U+0030), then click on “9″ and do the same (U+0039). Now, in your Flex application, you would specify this range in the @font-family style block like so:

unicode-range: U+0030-U+0039;

If you wanted to specify multiple ranges, you would just separate them with commas:

unicode-range:
    U+0030-U+0039, /* 0-9 */
    U+0041-U+0051, /* Uppercase A-Z */
    U+0052-U+007A; /* Lowercase a-z */

And if you just want to embed the whole range of all uppercase, lowercase, punctuation, and symbols, you could just specify the following unicode range:

@font-face {
    src: url('assets/base02.ttf');
    font-family: Base02;
    unicode-range: U+0021-U+007B; /* whole range of uppercase, lowercase, symbols and punctuation. */
}

Again, use the character map if you want to find additional character such as the copyright symbol (©) or other symbols.

Remember, all fonts may not include special “extended” characters such as copyright symbols, dollar signs, fractions, pound signs, euro signs, etc. Make sure you check that your font includes the characters you need.

Now, with that out of the way, lets look at a full sample of unicode-range embedding in action!

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/07/specifying-certain-unicode-ranges-for-embedded-fonts/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            /* Import all the easing classes so its
               easier to switch between them on the
               fly without tweaking import statements. */
            import mx.effects.easing.*;
        ]]>
    </mx:Script>

    <mx:Style>
        @font-face {
            src: url('assets/base02.ttf');
            font-family: Base02;
            unicode-range: U+0021-U+007B; /* whole range of uppercase, lowercase, symbols and punctuation. */
        }

        .MyEmbeddedFont {
            font-family: Base02;
            font-size: 14px;
        }
    </mx:Style>

    <!-- Set zoom effect for 2.5 seconds (2500 milliseconds) and use the Elastic.easeOut easing method. -->
    <mx:Zoom id="zoom" duration="2500" easingFunction="Elastic.easeOut" target="{embeddedText}" />

    <!-- Use advanced font anti-aliasing for the embedded font, set the rotation to 5 degrees, alpha to 80% and loop the animation. -->
    <mx:Text id="embeddedText" text="The quick brown fox jumped over the lazy dog." styleName="MyEmbeddedFont" rotation="5" alpha="0.8" fontAntiAliasType="advanced" creationComplete="zoom.play();" effectEnd="zoom.play()" />

</mx:Application>

Shocking? No, not really, because we saw the new unicode-range style earlier in the pre-code discussion. But what kind of filesize savings did we encounter by only embedding a “small range” of characters? Well, in this case, none really. The Base02 font really only has the regular letters, numbers, punctuation and symbols to begin with, so our SWF size is still ~260 KB, same as the previous article where we didn’t specify a range at all.

But what if we only specify the exact characters that we need, the uppercase “T”, full range of lowercase letters and the period? Well, as luck has it, I did just that:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/07/specifying-certain-unicode-ranges-for-embedded-fonts/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            /* Import all the easing classes so its
               easier to switch between them on the
               fly without tweaking import statements. */
            import mx.effects.easing.*;
        ]]>
    </mx:Script>

    <mx:Style>
        @font-face {
            src: url('assets/base02.ttf');
            font-family: Base02;
            unicode-range:
                U+0054-U+0054, /* T */
                U+0061-U+007A, /* a-z */
                U+002E-U+002E; /* . (period) */
        }

        .MyEmbeddedFont {
            font-family: Base02;
            font-size: 14px;
        }
    </mx:Style>

    <!-- Set zoom effect for 2.5 seconds (2500 milliseconds) and use the Elastic.easeOut easing method. -->
    <mx:Zoom id="zoom" duration="2500" easingFunction="Elastic.easeOut" target="{embeddedText}" />

    <!-- Use advanced font anti-aliasing for the embedded font, set the rotation to 5 degrees, alpha to 80% and loop the animation. -->
    <mx:Text id="embeddedText" text="The quick brown fox jumped over the lazy dog." styleName="MyEmbeddedFont" rotation="5" alpha="0.8" fontAntiAliasType="advanced" creationComplete="zoom.play();" effectEnd="zoom.play()" />

</mx:Application>

Yeah, the same big snippet for a minor little tweak, but hey. I’m sure it makes somebody’s life easier if they can grab all the code in one place instead of copying from two sources.

So, with the bare minimum of characters embedded, what is the new file size of the SWF? My main SWF file is now down to 193 KB (down from ~260 KB), which is about 74% of its original size, and only 46 KB larger than the same example without any embedded font. Not too bad for a tiny bit of work! Of course, its pretty easy when you know exactly which characters are used. If we were using the font for multiple text fields or a TextInput/TextArea control you would probably need to embed the whole range of characters since you couldn’t be sure of what the user would be entering.

View source is enabled in the following example.

Base 02 font by www.stereo-type.net.