A missing feature in Flex is the ability to load fonts at runtime.

‘Why is this useful?’, you could ask. Well one situation is you’re creating an online rich text editor, and you want to add a font
to the font list. You would only have to edit the css and upload the new swf instead of the whole application. Or you want a client
to be able to add fonts without him having the source code from the application.

Luckily it’s possible in Flex to load runtime CSS compiled as an SWF with the StyleManager class.
StyleManager on LiveDocs

Fonts.css Example :

1
2
3
4

@font-face {
    src:url("fonts/Arial.ttf");
    fontFamily:"Arial";
}

How to compile the CSS to SWF?



In Flex Builder you can right click any CSS inside your source and check the “compile CSS to SWF” option.


An alternative way to compile the CSS to SWF is using the command line :

1

mxmlc Fonts.css

Loading the compiled stylesheet

For the example where we just compiled the Fonts.css to Fonts.swf

1
2
3

import mx.styles.StyleManager;
 
StyleManager.loadStyleDeclarations("Fonts.swf");

It’s as simple as that… you can now start using the font.
The nice thing about this is you can now load your fonts visually using an intermediate loader or animation.


Loading the stylesheet visually with intermediate loader

First thing we do is create a custom titlewindow with a preloader in it to show the loading.
We can catch the StyleEvent.COMPLETE with an IEventDispatcher.
Right click the example for the source code.

You can use this to ‘preload’ any stylesheet.

Compiling CSS to SWF and loading it runtime is also used for application with theme support.
You can read more about that and view an example here : Understanding runtime CSS

Happy coding!

michiel AIR, AS3, CSS, Flex, Tutorials AS3, CSS, Flex