Flex Font Embedding

Recently I released the Atellis Reflection Component on Atellis Labs, and I’ve been meaning to post a few follow up topics. The first is on a common issue with embedded fonts in Flex.

The reflection component uses the BitmapData class to copy and manipulate an image of the area being reflected, and a small limitation of using BitmapData is that client side fonts don’t show up in the resulting image. No problem though, just embed a font and use it as the default font for the application. Sounds easy, but be sure you embed the bold face for your font as well. This is a hard to find technique that will make sure all the text in your application is using the embedded font.

@font-face {
    src: local("Arial");
    fontFamily: ArialEmbedded;
    fontWeight: normal;
}
 
@font-face {
    src: local("Arial");
    fontFamily: ArialEmbedded;
    fontWeight: bold;
}
 
Application {
    font-family: ArialEmbedded;
}

Note: Embedding fonts can increase the size of your swf files significantly.

6 Responses to “Flex Font Embedding”

  1. Alex says:
    July 17, 2007 at 1:28 pm

    Another note: If you want to use italic fonts as well, you need to embed 4 fonts

    normal style – normal weight
    normal style – bold weight
    italic style – bold weight
    italic style – normal weight

  2. Richard T-J says:
    July 17, 2007 at 5:18 pm

    Can you embed a subset of a font? I like the fact that Flash lets you select just the glyphs you require (e.g., Uppercase, numbers and -, ,%).

    Is there a similar policy in Flex, or could you embed the required fonts in Flash, create a .swf and use it as a shared library in Flex/AS3?

  3. Andrew Trice says:
    July 17, 2007 at 6:57 pm

    Hey Ben,
    Great stuff. I just wanted to add a note that you can embed the necessary font character sets in a Flash based swf file, and then embed that swf file to have less of an impact on the overall file size. For instance, you can embed the entire Arial font and add ~400 K to your compiled swf size, or you can select a subset and embed that and increase file size by 30 K. More info here:

    http://livedocs.adobe.com/flex/201/html/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Book_Parts&file=fonts_070_11.html

    -Andy

  4. Ben says:
    July 17, 2007 at 9:44 pm

    Alex – Yes, definitely worth mentioning.

    Richard & Andrew – You can load font character sets from a swf file if you need to, especially if the font type is not recognized by the flex compiler. Otherwise, you can still define character ranges in CSS.

    @font-face {
        src:url("../assets/MyriadWebPro.ttf");
        fontFamily: myFontFamily;
        flashType: true;
        unicodeRange:
            U 0041-U 005A, /* Upper-Case [A..Z] */
            U 0061-U 007A, /* Lower-Case a-z */
            U 0030-U 0039, /* Numbers [0..9] */
            U 002E-U 002E; /* Period [.] */
    }

    Check out the live docs for details.

  5. Tom Chiverton says:
    July 18, 2007 at 1:52 am

    Excellent post, and the comments about unicodeRange are useful too – saves 165K (with a normal and a bold fold).

  6. Holland Risley says:
    November 8, 2007 at 5:35 am

    This example also includes the unicode range which embeds all common punctuation…

    @font-face {
    src:url(“../assets/MyriadWebPro.ttf”);
    fontFamily: myFontFamily;
    flashType: true;
    unicodeRange:
    U 0041-U 005A, /* Upper-Case [A..Z] */
    U 0061-U 007A, /* Lower-Case a-z */
    U 0030-U 0039, /* Numbers [0..9] */
    U 0020-U 002F, /* Punctuation */
    U 003A-U 0040, /* Punctuation */
    U 005B-U 0060, /* Punctuation */
    U 007B-U 007E; /* Punctuation */
    }

    Holland Risley