Controlling Flex swf Size via Judicious Font Embedding

May 12, 2008

Embedding fonts in your application can quickly cause your swf to balloon in size.  When it simply cannot be avoided, you can try to limit the damage by only embedding the glyphs (characters) that you plan on actually displaying in your application.

For example, in my current application, we needed a countdown clock.  The designers were kind enough to send me a cool scoreboard font, and I embedded it in the app.

@font-face {
src:url("../fonts/scoreboard.ttf");
fontFamily: scoreboard;
fontWeight: normal;
unicodeRange: U+0030-U+003A;
}

By simply adding that unicodeRange value, I was able to decrease the size of my compile swf by 24k. Not the largest of differences, but when you are embedding multiple fonts, the differences can add up fairly quickly.

What happened there? Well, we told the Flex compiler to only include the glyphs between 0030 and 003A. 0030 – 0039 are the digits 0-9 while, luckily for us, 003A is the colon character. Those are the only glyphs that we need for our ticker.

You can find complete lists of unicode codes at the Unicode web site.  As well, Adobe livedocs has an article with a few more useful ranges listed and more information on unicodeRange.

Advertisement

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 )

Connecting to %s

Follow

Get every new post delivered to your Inbox.