Embed Fonts with Unicode in Flex

Our on going application is having requirement to manipulate fonts. There is a one conventional way to embed fonts with .swf i.e. using CSS.

In CSS, we normally specify the source and fontFamily .

@font-face
{
src: url(‘../assets/fonts/ARIAL.TTF’);
fontFamily: “Arial”;
}

Let’s say my application need to support around 100 multiple font families. if you embed all of them that’s become a huge .swf.

What we can do is to allow only the Alphabets, numbers and some special characters to be embed. Yes, we can achieve this using Unicode . For ex.

@font-face
{
src:url(‘../assets/fonts/ARIAL.TTF’);
fontFamily: “ARIAL”;
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 */
}

By specifying the Unicode values of all the character to be embed we can reduce the size of font embed drastically. Also, it can be used as a validation for Input controls also.

I will be looking forward to use this feature in many more possible ways.