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 */
}
if anyone knows of other ranges you think can be generally useful please let me know ;)