Setting unicodeRange in Flex using CSS

Embedding fonts in Flex is easy and definitely recommended. It enables you to make them more readable for your users by using anti-aliasing and smoothing. It even allows rotation and transparancy of fonts. I can’t find a reason not to use this functionality as a design Norton Symantec Clé often requires it… Oh wait a minute, I do. An insane increase in filesize!

By just embedding a standard truetype font, you increase your application’s filesize with approximately 800kb! That’s a lot of bytes… but cheer up, there’s a solution.

In Flex, you can use unicode-ranges to specify which characters you want to embed in you application. It’s fairly easy using css, and it’ll slice off some of those bytes on your application. Office 2007 Clé Check this out:

  1. @font-face {
  2.   src:url("../yourAssets/fonts/calibri.ttf");
  3.   fontFamily: Calibri;
  4.   advancedAntiAliasing: true;
  5.   unicodeRange:
  6.     U+0040-U+00FF, /*   @ABC….  */
  7.     U+0030-U+0039, /*   0-9   */
  8.     U+003A-U+0040, /*   :;<=>?@   */
  9. }
  10. .someClass{
  11.   fontFamily: Calibri, Arial, "_sans";
  12.   color: #FF0000;
  13.   fontSize: 16px;
  14. }

Using this Unicode table on wikipedia you can find the exact character you want to embed. As you can see in the example above, I’ve embedded the character range from U+0040 which starts on the first row, in the first column to U+00FF and ends on the 8th row and in the last column. The same goes for the other ranges. If you can’t find a specific character in this table, there is always google… Try pasting your character and adding ‘unicode’. I’m sure you’ll find the right code that you can add to the range of characters you need.

This entry was posted on Monday, September 15th, 2008 at 11:33 pm and is filed under Flex. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

2 Responses to “Setting unicodeRange in Flex using CSS”

  1. CamelCafka Says:

    Nice tip. I was just looking for how to embed fonts.
    thx

  2. novio.be Says:

    This W3C page about Unicode ranges is also interesting:
    http://www.w3.org/TR/1998/REC-CSS2-19980512/fonts.html#descdef-unicode-range