Flex Examples
The following example shows how you can embed a font using ActionScript and the [Embed] metadata.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/07/embedding-fonts-in-a-flex-application-using-embed-metadata/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white"
applicationComplete="init();">
<mx:Script>
<![CDATA[
import mx.utils.ObjectUtil;
[Embed(source="assets/Base 02.ttf",
fontName="EmbeddedBase02",
mimeType="application/x-font")]
private var EmbeddedBase02:Class;
private function init():void {
var c:Font = new EmbeddedBase02();
ta.text = ObjectUtil.toString(c);
}
]]>
</mx:Script>
<mx:ApplicationControlBar dock="true">
<mx:Label id="lbl"
text="The quick brown fox jumped over the lazy dog."
fontFamily="EmbeddedBase02"
fontSize="18" />
</mx:ApplicationControlBar>
<mx:TextArea id="ta"
editable="false"
width="100%"
height="100%" />
</mx:Application>
If you need to specify a custom unicode range (see “Specifying custom named unicode ranges in Flex” for more details), you can use the following snippet:
[Embed(source="assets/Base 02.ttf",
fontName="EmbeddedBase02",
mimeType="application/x-font",
unicodeRange="englishRange")]
private var EmbeddedBase02:Class;
You can also embed system fonts by name, instead of by location, by specifying the systemFont parameter instead of the source parameter, as seen in the following snippet:
[Embed(systemFont="Tahoma",
fontName="EmbeddedTahomaItalic",
fontStyle="italic",
advancedAntiAliasing="true",
mimeType="application/x-font")]
private var EmbeddedTahomaItalic:Class;
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
Do you happen to know what font formats are supported? I assume that both Windows and Mac fonts can be used?
Luke, if you can use it in flex, you propably can embed it.
PFM/PFB are not supported. You need to embed these fonts using the Flash IDE, set the linkages, and export the SWF file. You can then embed the SWF file into your class and access the fonts based off of their names. In my tests I’ve found this produces a smaller file size for some reason.
http://livedocs.adobe.com/flex/3/html/help.html?content=fonts_09.html#251936
OTF is supported, but I’ve yet to use fonts of this type so I can’t really speak to it.
Peter, thank you!
Hi,
I have tried it and it works compile time.WHen i want to do it runtime,for example i am changing a combo box and i want to change the font-family of a textarea text.Its not working.I am using setStyle() for it.Can u suggest something for the same.
sheetal nilwant,
The following example shows how you can dynamically change the font family on a Flex TextArea control using data binding:
<?xml version="1.0"?> <Application xmlns="http://www.adobe.com/2006/mxml" backgroundColor="white"> <ApplicationControlBar dock="true"> <ComboBox id="comboBox" dataProvider="[Arial,Verdana,Times New Roman,Trebuchet MS,Comic Sans MS]" /> </ApplicationControlBar> <TextArea id="textArea" fontFamily="{comboBox.selectedItem}"> <text>The quick brown fox jumps over the lazy dog.</text> </TextArea> </Application>Peter
Sorry, here’s an example using the
setStyle()method:<?xml version="1.0"?> <Application xmlns="http://www.adobe.com/2006/mxml" backgroundColor="white"> <Script> <![CDATA[ import mx.events.ListEvent; private function comboBox_change(evt:ListEvent):void { var fontName:String = comboBox.selectedItem.toString(); textArea.setStyle("fontFamily", fontName); } ]]> </Script> <ApplicationControlBar dock="true"> <ComboBox id="comboBox" dataProvider="[Verdana,Times New Roman,Trebuchet MS,Comic Sans MS]" change="comboBox_change(event);" /> </ApplicationControlBar> <TextArea id="textArea"> <text>The quick brown fox jumps over the lazy dog.</text> </TextArea> </Application>Peter
Peter,
Thanks for the demo. One problem I keep running into is the limit of how many embedded fonts I can put into a css before it brings my compiler to a standstill. Essentially, I want to create a RichTextEditor (toolbar separated) that can rotate, but unless I embed the fonts (including normal, bold, italic, and bold & italic), the font disappears the moment rotation passes 1 degree.
One thing I’ve tried doing is limiting the number of fonts available to 8 fonts (i.e. Arial, Courier, etc), but even that makes me need to have 32 @font-face statements in my css, otherwise the bold or italics (or combined) won’t work. If I remove the css, then I lose the text upon rotate. Any thoughts/help? Thanks,
lordB8r
@lordB8r,
I can only imagine embedding 32 font faces would create an enormous SWF that would take a long time to load anyways. You may want to reconsider embedding that many fonts.
Out of curiosity, if the compiler ever finishes compiling, how large is that SWF?
Peter