Excluding font outlines in Flex can shave off over 200kb!

Excluding font outlines in Flex can shave off over 200kb!

Often when you need to embed a font you also need to include ‘bold’ and sometimes ‘italic’ styles. Sometimes you need more than one fontFamily. Flex by default will embed all glyphs of a fontFamily. Embedding every glyph if generally unnecessary. By restricting the character set (’unicode-range’) you can shave off between 50-100kb or more per font style (FontFamilies have varying amounts of glyphs and obviously varying complexities of outlines which effects how much you can save). Anyway by setting unicode-range for fonts we managed to shave 300kb off our application, I wasn’t expecting it to be so much so thought worth a blog ;)

@font-face {

src: url("assets/Arial.ttf");

fontFamily: Arial;

advancedAntiAliasing: true;

unicode-range: U+0030-U+0039, /* 0-9 */

U+0041-U+005A, /* Uppercase A-Z */

U+0061-U+007A, /* Lowercase a-z */

U+0021-U+002F, /* !"#$%&'()*+,-./ */

U+003A-U+0040, /* :;<=>?@ */

U+005B-U+0060, /* [\]^_ */

U+00A3-U+00A3, /* £ */

U+00A9-U+00A9, /* © */

U+00AE-U+00AE /* ® */

/* U+00BF-U+0259  FOREIGN CHRS */

}

Further reading:
http://livedocs.adobe.com/flex/3/html/help.html?content=fonts_07.html

if anyone knows of other ranges you think can be generally useful please let me know ;)