{"id":41,"date":"2008-04-14T20:56:10","date_gmt":"2008-04-14T18:56:10","guid":{"rendered":"http:\/\/blog.ansuz.nl\/?p=41"},"modified":"2010-11-15T12:59:33","modified_gmt":"2010-11-15T10:59:33","slug":"fonts-and-loading-times","status":"publish","type":"post","link":"http:\/\/blog.ansuz.nl\/index.php\/2008\/04\/14\/fonts-and-loading-times\/","title":{"rendered":"Fonts and loading times"},"content":{"rendered":"

When embedding fonts there are a couple of things you need to keep in mind.<\/p>\n

    \n
  1. When will you need them? (i.e. during the loading)<\/li>\n
  2. How to embed them? Using the IDE or Flex?<\/li>\n
  3. Where will you embed them?<\/li>\n<\/ol>\n

    Since there is no way to export you library items in another frame than the first in AS3 you need to look for alternatives.<\/p>\n

    An alternative would be to just accept the increased file size when embedding them in the first frame and showing no information to the user when this is loading. I have noticed though that a simple Latin-1 font adds about 30 kB. One could reason with the widespread availability of broadband this shouldn’t be too bad.<\/p>\n

    The other option is to embed the font in an external file and decide not to use it for the loader. This keeps your file size down and increases initial loading, that way you can show the user sooner what is happening.<\/p>\n

    Also keep in mind that when you use a standard embed tag with Flex the embedded font will take up more space than when you use the Flash IDE to embed the fonts. You can avoid this though by specifying in the embed tag which characters you want to embed. A disadvantage of using the embedding with the IDE is that you won’t know for sure if your embedded fonts work until you have uninstalled them from you machine or test on a machine that doesn’t have the font.<\/p>\n

    Embedding in using the IDE goes as follows:<\/p>\n

      \n
    1. In the library click<\/li>\n
    2. ..<\/li>\n<\/ol>\n

      To embed a font in Flex you use the following code:<\/p>\n

      \n\n\t\t
      \n\n\t\t
      \n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\n\t\t\t\t\t<\/div>\n\n\t\t
      ActionScript<\/div>\n\n\t\t\n\t\t
      \n\n\t<\/div>\n\t\n\t
      \n\t\t
      1. \/\/ embedding fonts using flex<\/span><\/div><\/li>\n
      2.  <\/div><\/li>\n
      3. \/\/ note: leave the unicodeRange part out is you want to embed the entire font.<\/span><\/div><\/li>\n
      4. [<\/span> Embed(<\/span> source="Arial.ttf"<\/span>, fontName="Arial"<\/span>, mimeType="application\/x-font-truetype"<\/span>, unicodeRange="<span><span class="<\/span>character">U+0020-U+002F<\/span><\/span>"<\/span> )<\/span> ]<\/span><\/div><\/li>\n
      5. public<\/span> var<\/span> Arial:Class<\/span>;<\/div><\/li>\n<\/ol>\t<\/div>\n\n<\/div>\n\n

        Now if you decide to load the font from an external file, you’ll need to register the freshly loaded font with the Flash player.<\/p>\n

        \n\n\t\t
        \n\n\t\t
        \n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\n\t\t\t\t\t<\/div>\n\n\t\t
        ActionScript<\/div>\n\n\t\t\n\t\t
        \n\n\t<\/div>\n\t\n\t
        \n\t\t
        1. \/\/ register the font with the player<\/span><\/div><\/li>\n
        2. \/\/ where appDomain is a reference to the application domain the externally loaded font is in<\/span><\/div><\/li>\n
        3. var<\/span> arial:Class<\/span> = Class<\/span>(<\/span>appDomain.getDefinition<\/span>(<\/span> "Arial"<\/span> )<\/span>)<\/span>;<\/div><\/li>\n
        4. Font<\/span>.registerFont<\/span>(<\/span>arial)<\/span>;<\/div><\/li>\n<\/ol>\t<\/div>\n\n<\/div>\n\n

          Some useful links about embedding a subset of a (unicode font):
          \n–           Unicode Character Table<\/a>
          \n–           Yahoo on runtime font embedding<\/a><\/p>\n

          That’s about it for embedding fonts.<\/p>\n

          Update:<\/strong>
          \nIf embedded fonts aren’t showing up when compiling with Flex 4, add embedAsCFF=”false”<\/strong> to the embed-tag.<\/p>\n","protected":false},"excerpt":{"rendered":"

          When embedding fonts there are a couple of things you need to keep in mind. When will you need them? (i.e. during the loading) How to embed them? Using the IDE or Flex? Where will you embed them? Since there … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[139,17,16],"class_list":["post-41","post","type-post","status-publish","format-standard","hentry","category-actionscript-30","tag-actionscript-30","tag-embed","tag-fonts"],"_links":{"self":[{"href":"http:\/\/blog.ansuz.nl\/index.php\/wp-json\/wp\/v2\/posts\/41","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/blog.ansuz.nl\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/blog.ansuz.nl\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/blog.ansuz.nl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/blog.ansuz.nl\/index.php\/wp-json\/wp\/v2\/comments?post=41"}],"version-history":[{"count":1,"href":"http:\/\/blog.ansuz.nl\/index.php\/wp-json\/wp\/v2\/posts\/41\/revisions"}],"predecessor-version":[{"id":247,"href":"http:\/\/blog.ansuz.nl\/index.php\/wp-json\/wp\/v2\/posts\/41\/revisions\/247"}],"wp:attachment":[{"href":"http:\/\/blog.ansuz.nl\/index.php\/wp-json\/wp\/v2\/media?parent=41"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/blog.ansuz.nl\/index.php\/wp-json\/wp\/v2\/categories?post=41"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/blog.ansuz.nl\/index.php\/wp-json\/wp\/v2\/tags?post=41"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}