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;
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