- From inside MXML in your Application using the <Style source="assets/styles.css"/> tag
- By loading an external stylesheet SWF file (compiled from a CSS file) using the
Then I finally found the solution in this article (right near the bottom of the page in the comment by Henk). And that pointed me to this LiveDoc - Applying styles to your custom component which solved the problem. Scroll most of the way down until you get to the part called "Applying styles from a defaults.css file".
If you don't want to read the articles above, here is my brief summary.
Using a StyleSheet in your FlexLibrary Project:
- create a StyleSheet in the src directory of your project, and call it defaults.css
- open the project Properties > Flex Library Build Path and check the src/defaults.css file under the Assets tab
- define your styles inside the defaults.css StyleSheet
- You can include only a single style sheet in the SWC file
- The file must be named defaults.css
- The file must be in the top-most directory of the SWC file
Using Embedded Fonts inside Flex Library Project/SWC:
If you want to use an embedded font inside your library project you have two ways of doing this:
- Embed the font inside an ActionScript file like this (the font is inside the project src/assets directory):
public var verdanaFont:Class;
- Or put your embedded ttf font in your project's src directory and embed the fond using the defaults.css file (the font must be in the src directory for this to work - see this Adobe Bug for more details):
/* must use embedded font for label rotation to work */
/* must specifically set the font weight */
Here is a simple example of font/label rotation (right click "View Source" for the code).
In this example I actually included three fonts - Verdana plain, Verdana bold, and Comic Sans.
* Note that fonts can greatly increase the size of your SWF. The three fonts that I used above are all about 150 KB each. One way to reduce the size of your SWF is to restrict the unicode character range (meaning that only part of the font set is included in your SWF). Here is the LiveDoc on Using Fonts and Setting Character Ranges.
Ben Stucki's blog helped me figure out how to embed a bold and plain font in CSS.