Tuesday, October 12, 2010

Simple steps to dynamically load fonts

Finally I have been able to reduce my application size considerably by loading fonts at runtime.
Simple steps to do this:

1)Create a Font css file (give the font file name and font family name that you would use in your flex app)

eg:abc.css

"@namespace s \"library://ns.adobe.com/flex/spark\"
"@namespace mx \"library://ns.adobe.com/flex/mx\" 
"@font-face {
     src: url("AGaramondPro-Regular.otf")
     fontFamily: "AdobeGaramondProRegular" 
     embedAsCFF: true;
            } 


2)Convert it to swf using mxmlc compiler.
mxmlc [options] abc.css
This compiler resides as yourflashbuilderdirectory/sdks/4.0.0/bin/mxmlc.exe

Note:You may get some error related to msvcr71.dll while compiling, so please copy the same from java/jre(your version)/bin directory to the mxmlc directory.

3)load this font swf at runtime

StyleManager.loadStyleDeclarations (path to your font's swf)

Once this swfs get loaded the fonts get embedded and registered automatically.