Embedded Fonts on Dynamic Label Component

I am working on a project that calls for multiple label
components to be dynamically rendered based on a selected comboBox
selectedItem. The comboBox is a choice of fonts available to the
user - all of which are embedded fonts. For some reason, the fonts
are not embedding correctly for systems that do not have the font
on the system.
I have added the fonts to the library and selected "Export to
ActionScript" as well as "Export in First Frame" (although I want
to preload these later once this issue is resolved). In my steps to
simplify and solve, I created a basic movie with a label on the
stage with an instance name of "label0".
In my Actions frame, I use the following code:
label0.text = "This is a font test";
label0.setStyle("fontFamily", "Vivaldi");
label0.setStyle("fontSize", "40");
label0.setStyle("embedFonts", "true");
I have seen examples on the web where someone uses
label0.embedFonts = true; but that doesn't seem to work either. I
have also tried various fonts to verify the font will embed.
Thinking I may not be embedding it correctly, I checked the
bandwidth profiler and variables list and the size goes up after I
try to embed the font as well as the label0 variables correctly
show embedFonts = true as well as the fontFamily is set to Vivaldi
(sample).
Many people have used Dynamic Text Fields but I need to use a
Label so I can use the autoSize feature as users are allowed to
choose their own font size (between 10pt and 40pt). The label
component seems to be the right option for me with the exception of
the font selection. To be safe, I added a dynamic text field and
embedded the fonts there as well and hid it off stage. When viewing
it on another system, the dynamic text field worked (poorly) but it
showed the font. The label did not show the correct font.
Any help would be greatly appreciated.
Thanks

Yes, when I set label0.setStyle("fontSize", "40"); the size
changes for both systems (the one that has the font installed as
well as the one that doesn't). On the system that doesn't have the
font, it appears as a Times New Roman font in large type.
Reference:
Using
styles with the Label component (Adobe Live Docs)

Similar Messages

Embedding fonts in dynamic text fields

I am having trouble embedding a font in my Flash file. I have the font in my library. I have the text field selected to that font with the * next to it.
In my actions I have:
vid_title_txt.embedFonts = true;
If I set it to false instead, it shows a different font. But if it is set to true, nothing shows. I am running out of ideas what to look at to solve this issue. What am I doing wrong here?
Thank you very much for any help with this!

I am in AS2.
I followed these steps.
Open the Library panel (Ctrl+L).
Add a font to your library - click the options menu in the upper right corner of the panel and select New Font from the menu.
In the Font Symbol Properties dialog box select the font, size and style that you want and give the font combination a name. Click OK to close the dialog box.
Right-click the font symbol in the library and select Linkage from the contextual menu.
In the Linkage Properties dialog box, click the Export for ActionScript button to enable both the Identifier and AS 2.0 Class text input fields. Leave the default Identifier value and click OK to close the dialog box.
Select the text tool from the Tools panel and draw a dynamic text field on the Stage.
Give the text field an instance name of "my_txt". In the Font menu select the symbol name you gave the embedded font earlier. You should see a little asterisk (*) beside the name.
In the Property inspector set the font size and style to match those in the Font Symbol Properties dialog box earlier.
Open the Actions Panel and add the following code to Frame 1 of your Flash document:
my_txt.embedFonts = true;
my_txt._rotation = 15;
my_txt._alpha = 10;

Text jumps after embedding font in dynamic text field!

Hi
this is driving me mad
Im using a standard font (Gotham rounded) within a dynamic text field. As soon as I embed the numerals within this text field the text lowers within the text field. Double clicking the field then renders the text higher up! It seems that the height it shows when I double click is the height it compiles at.
The other strange and annoying thing is that my colleague working on the same project is using the exact same font and same file but this doesnt happen to him and so the font redners out differently when he compiles!
Could anybody please help me sort this problem out as its reeeeally annoying
many thanks!
Nick

nobody any ideas?!

This component requires that the embedded font be declared with embedAsCFF=false.

I'm getting the following warning for my project.
"warning: incompatible embedded font 'MyFont' specified for views::MyViewInnerClass0 (MyViewInnerClass0_61) . This component requires that the embedded font be declared with embedAsCFF=false."
Here's what I have in my style.css file.
/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace supportClasses "spark.globalization.supportClasses.*";
@namespace views "views.*";
@font-face {
          src: url("assets/MyFont.ttf");
fontFamily: "MyFont";
advancedAntiAliasing: true;
embedAsCFF: true;
@font-face {
          src: url("assets/MyFont.ttf");
fontFamily: "MyFont";
advancedAntiAliasing: false;
embedAsCFF: false;
The 2nd font section I have is what is suggested as the fix in most places but that isn't working out for me. I wonder if I'm missing something else.

I tried changing the name and it didn't work. Tried all sort of combinations too and none worked. Tried a different font and that didn't work too.
Turns out the problem wasn't in the declaration of the fonts but where I was using it.
I initially had the font declared globally
global
   fontFamily: DroidSansMono;
I saw that, in your comment you had mentioned "..then apply it to the component" so I applied the font to the label component
s|Label
fontFamily: DroidSansMono;
and boom.. no warning. Problem solved.
Thanks so much.

Unable to load embedded fonts in TlF / FlowLeafElement

dears,
I use TextFlowUtil.importFromString and FlowLeafElement to make each some text have its own style, every some words have diffirent color, fontFamily, fontSize....etc
that is done here in the text attribute in this xml tag, and TextFlowUtil.importFromString and FlowLeafElement make taht perfect:
<TextArea text="<div direction="rtl">
 
 Welcome to Android Training. Here you'll find a collection of classes that aim to help you build great apps for 
 Android, using best practices in a variety of framework topics.
 
 
 
 Each class explains the steps required to solve a problem or implement a feature using code snippets and 
 sample code for you to use in your apps.
 
 
 
 What you see now is just the beginning. We plan to add many more classes, expand and refine existing 
 classes, and build Training Courses that help you enhance your apps using objective-oriented collections of 
 classes.
 
</div>" direction="rtl" styleName=".textAreaTitle" editable="false" selectable="true" scrollable="false" mainReferance="UI.Components.Basics.TextArea" />
The problem is that i need to embed fonts, by this fontFamily="Arial" you can set font name which you want, but if i set font name which is embedded it won't work, like : fontFamily="ttf"
the embedded code is :
[Embed(source='/Resources/majallab.ttf',fontName='ttf',mimeType='application/x-font',embed AsCFF='true')]
var font1:Class; //This is only used to compile the code
I use Flex SDK 4.5,
what can i do ?
Thank you in advance,
amt

To use embedded fonts in a Flex component, the fontFamily for the component needs to be set to an embedded font that is in the same SWF as the other embedded fonts in the TextFlow. See my blog for more details
Alex Harui
Flex SDK Team
Adobe Systems, Inc.
http://blogs.adobe.com/aharui

Embedded font not working in Spark Label control?

Hi,
I'm trying to use embedded fonts with the Spark Label (formerly SimpleText) control. I'm using SDK 4 build 10485 now, but I could not manage it in Beta 1 neither.
I'v been playing with cff: true/false, embedAsCFF:true/false but no results.
I've added my test application where it does work with the Halo <mx:Label> control, but not with the Spark <s:Label> control.
So, no compiler errors, but the Spark label control shows a serif (Helvetia?) font where it should be sans as does the Halo control.
Can anybody help me out here?
Thanks
Jan
As I get the message 'the content type of this attachment is not allowed' on uploading the MXML file, here is the code:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
 xmlns:s="library://ns.adobe.com/flex/spark"
 xmlns:mx="library://ns.adobe.com/flex/halo"
 minWidth="1014" minHeight="768"
 backgroundColor="#7B7374">
 <s:layout>
 <s:VerticalLayout paddingBottom="8" paddingLeft="8" paddingRight="8" paddingTop="8" />
 </s:layout>
 <fx:Style>
 @namespace mx "library://ns.adobe.com/flex/halo";
 @namespace s "library://ns.adobe.com/flex/spark";
 @font-face {
 src: url("project/assets/thesans/THSP____.TTF");
 fontFamily: HaloSans;
 fontWeight: normal;
 advancedAntiAliasing: true;
 unicode-range: U+0021-U+007B;
 @font-face {
 src: url("project/assets/thesans/THSP____.TTF");
 fontFamily: SparkSans;
 fontWeight: normal;
 advancedAntiAliasing: true;
 unicode-range: U+0021-U+007B;
 embedAsCFF: true;
 .mySparkSans {
 fontFamily: SparkSans;
 fontSize: 24;
 .myHaloSans {
 fontFamily: HaloSans;
 fontSize: 24;
 </fx:Style>
 <s:SkinnableContainer>
 <s:Label styleName="mySparkSans" text="This should be TheSans but it is not...., notice the characters 'ag'"/>
 <mx:Label styleName="myHaloSans" text="This is TheSans, notice the characters 'ag'" top="100"/>
 </s:SkinnableContainer>
</s:Application>

Hi,
I'm trying to use embedded fonts with the Spark Label (formerly SimpleText) control. I'm using SDK 4 build 10485 now, but I could not manage it in Beta 1 neither.
I'v been playing with cff: true/false, embedAsCFF:true/false but no results.
I've added my test application where it does work with the Halo <mx:Label> control, but not with the Spark <s:Label> control.
So, no compiler errors, but the Spark label control shows a serif (Helvetia?) font where it should be sans as does the Halo control.
Can anybody help me out here?
Thanks
Jan
As I get the message 'the content type of this attachment is not allowed' on uploading the MXML file, here is the code:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
 xmlns:s="library://ns.adobe.com/flex/spark"
 xmlns:mx="library://ns.adobe.com/flex/halo"
 minWidth="1014" minHeight="768"
 backgroundColor="#7B7374">
 <s:layout>
 <s:VerticalLayout paddingBottom="8" paddingLeft="8" paddingRight="8" paddingTop="8" />
 </s:layout>
 <fx:Style>
 @namespace mx "library://ns.adobe.com/flex/halo";
 @namespace s "library://ns.adobe.com/flex/spark";
 @font-face {
 src: url("project/assets/thesans/THSP____.TTF");
 fontFamily: HaloSans;
 fontWeight: normal;
 advancedAntiAliasing: true;
 unicode-range: U+0021-U+007B;
 @font-face {
 src: url("project/assets/thesans/THSP____.TTF");
 fontFamily: SparkSans;
 fontWeight: normal;
 advancedAntiAliasing: true;
 unicode-range: U+0021-U+007B;
 embedAsCFF: true;
 .mySparkSans {
 fontFamily: SparkSans;
 fontSize: 24;
 .myHaloSans {
 fontFamily: HaloSans;
 fontSize: 24;
 </fx:Style>
 <s:SkinnableContainer>
 <s:Label styleName="mySparkSans" text="This should be TheSans but it is not...., notice the characters 'ag'"/>
 <mx:Label styleName="myHaloSans" text="This is TheSans, notice the characters 'ag'" top="100"/>
 </s:SkinnableContainer>
</s:Application>

This component requires that the embedded font be declared with embedAsCFF=true.

Hey all,
I fall into a small problem with fonts embedding. In my application I have embedded over 50 fonts and all expect one works as expected.
That one shows an error "warning: incompatible embedded font 'Algerian-CFF' specified for spark.components::RichEditableText (RichEditableText310) . This component requires that the embedded font be declared with embedAsCFF=true."
I have been looking all over the internet for similar problem, without success. Why this font is not working while all the rest does? Any clues?
/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
/* embedded font */
@font-face {
src: url("ttf/ALGER.ttf");
fontFamily: Algerian-CFF;
Thanks.

Thanks,
My issue is not to embed a font twice. Let me describe the issue so this will helpful.
I have embed a fonts like below code.And apply LucidaBlackletterSpark font for spark component but it gives me error like
"warning: incompatible embedded font 'LucidaBlackletterSpark' specified for spark.components::RichEditableText (RichEditableText2301) . This component requires that the embedded font be declared with embedAsCFF=true".
But Font have already embedAsCFF property true. I am not able to find the solution why it is give me this warning.Due to that i am not able to embed a font.
@font-face {
          src: url("assets/fonts/LucidaBlackletter.ttf");
          fontFamily: LucidaBlackletterSpark;
          embedAsCFF: true;
@font-face {
          src: url("assets/fonts/LucidaBlackletter.ttf");
          fontFamily: LucidaBlackletterMX;
          embedAsCFF: false;

How to have rotated axis labels in charts without embedding fonts?

Hi all,
I am trying to have slant/rotated axis labels in flex charts to avoid clutter in cases of large number of sample points. It was fairly easy to do this using 'labelRotation' method in AxisRenderer but this involved embedding fonts [ causes my swf to increase in size by atleast a 100KB which in my case is very high ]. My question is.. Can this be done without embedding the fonts? Maybe with the use of labelRenderer? Any alternatives that would solve the purpose without increase in swf size are also most appreciated as I ve been struggling with this for quiet a while.
Thanks a ton,
Siva

Please check LabVIEW\Examples\picture\demos.llb\polar plot demo.vi
But it has no zooming and cursors.
Maybe you can modify that example and use XY plot instead of picture control. I mean for each function plot on the picture, you generate another function to replace it and generate XY data pairs.

Dynamic text and embedded font

Hi,
I'm new to Flash and AS3, and I'm having a problem when I do
the following: I create an empty dynamic text field in the
authoring environment, click "Embed...", and choose the character
sets that I want (I get the same results when I embed the entire
font). The first time I change the contents of the text field with
the command:
text_field.text = "string 1";
I get good results--the text appears in the correct font.
However, subsequent attempts to update the .text property fail with
no error message, and the field becomes blank.
If I remove the embedded font by clicking "Don't embed" in
the embedding dialog, then every time I update the field's .text
property, it displays correctly using a local machine font.
I've also tried embedding the font in the swf by creating a
dynamic text field in the authoring environment, into which I place
no text, creating a second, functional text field in actionscript,
formatting it, using the "embed = true" property, and repeatedly
updating the .text property with the same bad results as described
above.
I haven't tried using the [embed] metatag to dynamically load
the font.
I've tested the swf in IE7 and Firefox on two machines with
the same results. What am I doing wrong?
Thanks,
Dave

Okay, here's more information. The font that I've been trying
to embed is Bitstream Vera Sans Mono. If I embed a different font,
like Bitstream Vera Sans, I have no problem. It seems to me that it
must be that my Bitstream Vera Sans Mono is corrupted, my .fla and
.swf files are corrupted, or there's a bug in flash...

External Embedded Fonts, Dynamic Text Fields, Latest?

Hi all,
I'm stuck in Flash8 land. Mostly because I use mProjector and
MDM Zinc to extend flash projectors and neither support AS3
correctly to date. That said..
Is a Flash8 SWF capable of using fonts embedded in "other"
SWFs? I realize this is an ongoing difficulty and a well known area
of confusion and well, I'm confused. All the attempts I've made so
far in linking have succeeded or failed in various ways, but never
fully work.
What I'd love to do is use dynamic text fields populated by
data from a database (or XML file), with CSS styling, using fonts
that are embedded in a 'master font SWF'. (and I'd like ice cream
with that too!)
I import fonts into, say, 'shared.fla'. I set them all up for
exporting via linkage (to shared.swf). I open up my other FLAs
(say, main.fla) and I drag the fonts from the shared.fla library
into main.fla's library. In looking at the linkage, I see it
properly set it to Import for Runtime Sharing (shared.swf). I can
see the font available in the main.fla font list and can select it
and use it just fine. I have to set the dynamic text field to embed
fonts to actually see them (and also
myTextField.setStyle("embedFonts",true)).
Now all that works well and fine, but the kicker is when I
want CSS to style my text. If I specify a embedded font linkage
identifyer in CSS, the text disappears. i.e. I load 'style.css' and
I have h1 { font-family: someEmbeddedFont; }, the <h1> text
will now disappear.
Any clues in how I can specify a font to use in CSS that's
embedded so it'll work, WITHOUT This font needed to be embedded in
the actual library (as in, not a linked asset)? Because it works
fine if I embed the font into every single SWF. But when I try to
use it as a shared asset, this doesn't work.
Any ideas on how someone can achieve this?
This is so I can changed my shared.swf and supply all new
fonts with the same linkage identifiers and change the font in a
whole project without re-exporting any other SWFs.
Thanks for any info!

I guess it's amazing but I honestly, wholly cannot get this
to work.
I made a new AS2 Flash 8 FLA (Forte.fla) with only the Forte
font with a size of 22 in the library. The name of the library
element was Forte. The linkage was set to "Export for Actionscript"
and "Export in first frame".
I made another FLA (main.fla) Flash8 AS2. In actionscript I
created an empty movie clip named "Asset_Forte" at the next highest
depth and Asset_Forte.loadMovie("Forte.swf"). I also made a dynamic
text field on the stage of this main.fla document and set it to
Arial 22pt (no bold or italics, etc). I did not embed anything into
it.
I made a TextTormat object (my_fmt) and set my_fmt.font =
"Forte";. I put some text in the dynamic text field to start so I
just applied the formatting (status_text.setTextFormat(my_fmt);).
This did not work. I started adjusting random things like
naming the font in the Forte.swf library to Forte22 and tried
my_fmt.font = "Forte22";. That didn't work.
I adjusted the linkage to "Export for runtime sharing" and
specified Forte.swf as the SWF to share from. This did not work.
I then dragged the font from the Forte.fla's library (while
"Export for runtime sharing" was enabled) into the library of
main.fla. I checked the link and it was proper, "Import for runtime
sharing, Forte.swf". I used both linkage attempts again (Forte and
Forte22) with my_fmt.font and neither worked.
Would it be possible at all to get a couple FLAs from you
that examplifies how you do this particular trick? I can't seem to
get the settings right. I would be indebted to you!

How to use dynamic loaded embeded font?

I have loaded fonts.swf on startup. I don't use TextLayout
Embeded fonts feature. Then i have loaded some xml and assign xml
to TextLayout. How I can use loaded font for display?

Are you using Flash CS4 or Flex?
Check out the following blog post, it contains instructions
for font embedding that may help you out:
Embedded
Font Subsetting Using DefineFont4

How to set fontFamily with an embedded font of a textFlow ?

Hy,
When I create a TextFlow without use any component of the flex SDK (4.0.13827) and then I try to change or apply a FontFamily of an embedded font, it doesn't work. Whereas when I use a component like RichEditableText or Label, it works.
Bellow the code I wrote for my test :
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
 xmlns:s="library://ns.adobe.com/flex/spark"
 xmlns:mx="library://ns.adobe.com/flex/mx"
 creationComplete="creationCompleteHandler(event)"
 width="800" height="600"
 >
 <fx:Style>
 @namespace s "library://ns.adobe.com/flex/spark";
 @namespace mx "library://ns.adobe.com/flex/mx";
 @namespace local "*";
 @font-face {
 src: url("assets/Fonts/arial.ttf");
 fontFamily: ArialEmbedded;
 advandedAntiAliasing: true;
 cff: true;
 unicodeRange: U+0020-U+002F,U+0030-U+0039,U+003A-U+0040,U+0041-U+005A,U+005B-U+0060,U+0061-U+007A,U+007B-U+007E,U+00A1-U+00FF,U+2000-U+206F,U+20A0-U+20CF,U+2100-U+2183;
 @font-face {
 src: url("assets/Fonts/cour.ttf");
 fontFamily: CourierEmbedded;
 advandedAntiAliasing: true;
 cff: true;
 unicodeRange: U+0020-U+002F,U+0030-U+0039,U+003A-U+0040,U+0041-U+005A,U+005B-U+0060,U+0061-U+007A,U+007B-U+007E,U+00A1-U+00FF,U+2000-U+206F,U+20A0-U+20CF,U+2100-U+2183;
 s|WindowedApplication
 </fx:Style>
 <fx:Script>
 <![CDATA[
 import flash.text.Font;
 import flash.text.engine.FontLookup;
 import flashx.textLayout.container.ContainerController;
 import flashx.textLayout.conversion.TextConverter;
 import flashx.textLayout.edit.EditManager;
 import flashx.textLayout.edit.IEditManager;
 import flashx.textLayout.elements.TextFlow;
 import flashx.textLayout.events.SelectionEvent;
 import flashx.textLayout.formats.TextLayoutFormat;
 import flashx.undo.UndoManager;
 import mx.collections.ArrayCollection;
 import mx.events.FlexEvent;
 import spark.core.SpriteVisualElement;
 import spark.events.IndexChangeEvent;
 private var dynTextFlow : TextFlow;
 private var ctTextFlow : TextFlow;
 protected function creationCompleteHandler(event:FlexEvent):void
 controlBarVisible=false;
 dynTextFlow = TextConverter.importToFlow("Hello World", TextConverter.PLAIN_TEXT_FORMAT);
 drawTextBloc(dynTextFlow);
 dynTextFlow.addEventListener(SelectionEvent.SELECTION_CHANGE, selectionChangeListener);
 dynTextFlow.fontFamily = "ArialEmbedded";
 dynTextFlow.fontLookup = FontLookup.EMBEDDED_CFF;
 dynTextFlow.fontSize = 24;
 dynTextFlow.interactionManager = new EditManager(new UndoManager());
 dynTextFlow.flowComposer.updateAllControllers();
 dynTextFlow.invalidateAllFormats();
 dynTextFlow.flowComposer.updateAllControllers();
 protected function cbFont_creationCompleteHandler(event:FlexEvent):void
 var fonts:ArrayCollection=new ArrayCollection(Font.enumerateFonts());
 cbFont.dataProvider=fonts;
 protected function cbFont_changeHandler(event:IndexChangeEvent):void
 var cf : TextLayoutFormat = new TextLayoutFormat();
 cf.fontLookup = FontLookup.EMBEDDED_CFF;
 cf.fontFamily = ComboBox(event.currentTarget).selectedItem.fontName;
 IEditManager(ctTextFlow.interactionManager).applyLeafFormat(cf);
 ctTextFlow.interactionManager.setFocus();
 private function drawTextBloc(txt : TextFlow) : void
 var container : SpriteVisualElement = new SpriteVisualElement();
 var controller : ContainerController = new ContainerController(container, 300, 200);
 addElement(container);
 txt.fontLookup = FontLookup.EMBEDDED_CFF;
 txt.fontFamily = "ArialEmbedded";
 txt.flowComposer.addController(controller);
 private function selectionChangeListener(event : SelectionEvent) : void
 ctTextFlow = event.currentTarget as TextFlow;
 protected function txt_selectionChangeHandler(event:FlexEvent):void
 ctTextFlow = (event.currentTarget as RichEditableText).textFlow;
 ]]>
 </fx:Script>
 <fx:Declarations>
 
 </fx:Declarations>
 <s:layout>
 <s:VerticalLayout paddingLeft="10" paddingTop="10"/>
 </s:layout>
 <s:RichEditableText x="10"
 y="10"
 selectionChange="txt_selectionChangeHandler(event)"
 paddingTop="5" paddingLeft="5" paddingRight="5" paddingBottom="5"
 id="txt"
 fontFamily="CourierEmbedded"
 text="RichEditableText"
 height="200"
 width="350"/>
 <s:ComboBox id="cbFont"
 labelField="fontName"
 creationComplete="cbFont_creationCompleteHandler(event)"
 change="cbFont_changeHandler(event)"
 />
 <s:Label text="TEST" fontFamily="CourierEmbedded" fontSize="22" rotation="45"/>
</s:WindowedApplication>
Please, help me...
Thank you very much...

Thank you very much,
I finally found the solution using the swfContext :
use namespace mx_internal;
myTextFlow.swfContext = ISWFContext(getFontContext("myFontName", false, false, FontLookup.EMBEDDED_CFF));
It works fine both with a dynamic component like RichEditableText or a dynamic textflow with a ContainerController.
Thanks

Module not unloading if embedded font was ever used

So, I have a test app that uses modules with the font embeded. Using ModuleManager I am able to load up the module. Once I call IModuleInfo.factory.create(), I am then able to setStyle("fontFamily", "BPDiet") and the font does show up. The issue I am now having is that once I have used a font from a module, even if my TextArea is no longer using it (I even tried removing the textArea, and replacing it with a new one), the module will not unload.
I read through this "What We Know About Unloading Modules" and I think I am not leaving any references around.They are loaded using the load() defaults. There is no code (that is used) in the module. The modules are not being added to the display, so they never receive focus.
Note that I am unable to run the profiler as suggested in the article as I don't have the premium Flash Builder 4. <grrr>
Note that the first module that is loaded, I can never get to unload, even if I never used the font embedded in it, but all subsequent modules will unload, if I do not use the embedded font. I can live with the first one being pinned as long as I can unload the others that are not in use.
Here is the code from one of my modules:
<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009"
 xmlns:s="library://ns.adobe.com/flex/spark"
 xmlns:mx="library://ns.adobe.com/flex/mx">
 <fx:Script>
 <![CDATA[
 import spark.components.TextArea;
 [Embed(source='assets/BPDiet.otf',
 fontName='BPDiet',
 mimeType='application/x-font')]
 public static var BPDietNormal:Class;
 public function GetSampleTextArea():TextArea {
 var SampleTextArea:TextArea = new TextArea();
 SampleTextArea.text = "Test BPDiet please!";
 SampleTextArea.setStyle("fontFamily", 'BPDiet');
 return SampleTextArea;
 ]]>
 </fx:Script>
</mx:Module>
And here is the App that is loading and using the modules:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
 xmlns:s="library://ns.adobe.com/flex/spark"
 xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="400" minHeight="400">
 <fx:Script>
 <![CDATA[
 import mx.collections.ArrayCollection;
 import mx.core.UIComponent;
 import mx.events.FlexEvent;
 import mx.events.ModuleEvent;
 import mx.managers.SystemManager;
 import mx.modules.IModule;
 import mx.modules.IModuleInfo;
 import mx.modules.Module;
 import mx.modules.ModuleManager;
 import spark.components.TextArea;
 private var _ta:TextArea = null;
 protected var _moduleInfo:IModuleInfo;
 private function LoadFontTextArea(fontSwf:String):void {
 status.text = "Loading the font pack";
 _moduleInfo = ModuleManager.getModule(fontSwf);
 // add some listeners
 _moduleInfo.addEventListener(ModuleEvent.READY, onModuleReady);
 _moduleInfo.addEventListener(ModuleEvent.ERROR, moduleLoadErrorHandler);
 _moduleInfo.addEventListener(ModuleEvent.UNLOAD, moduleUnloadHandler);
 _moduleInfo.load();
 private function onModuleReady(event:ModuleEvent):void {
 status.text = "The font pack swf Ready \n" + event.module.url;
 //All I had todo was create the module, then I could access the embeded font by name
 var fontMod:* = event.module.factory.create();
 //_ta = fontMod.GetSampleTextArea();
 //panelToStuff.addElement(_ta);
 fontMod = null;
 //fontNameForSample = event.module.url.replace(".swf", "");
 private function moduleLoadErrorHandler(event:ModuleEvent):void {
 status.text = "Font Module Load Error. \n" +
 event.module.url + "\n"+ event.errorText;
 private function moduleUnloadHandler(event:ModuleEvent):void {
 status.text = "Font Module Unload Event. \n" + event.module.url;
 private function fontChangedHandler():void {
 unloadCurrentFont();
 LoadFontTextArea(String(availFonts.selectedItem));
 private function unloadCurrentFont():void {
 if (_ta != null) {
 panelToStuff.removeElement(_ta);
 _ta = null;
 panelToStuff.removeElement(sampleTextArea);
 sampleTextArea = null;
 sampleTextArea = new TextArea();
 sampleTextArea.id = "sampleTextArea";
 sampleTextArea.text = "Some text for your viewing pleasure. " + colorForBK.toString(16);
 panelToStuff.addElement(sampleTextArea);
 if (_moduleInfo != null)
 _moduleInfo.release();
 //_moduleInfo.unload();
 _moduleInfo = null;
 System.gc();
 private function DoNonImportantWork():void {
 colorForBK -= 0xFAA;
 if (colorForBK < 0x0) colorForBK = 0xFFFFFF;
 var foo:* = {prop1: "yea" + colorForBK.toString(), prop2:"boo" + colorForBK.toString()};
 var hmm:String = foo.prop1 + " " + foo.prop2;
 regedFonts = new ArrayCollection(Font.enumerateFonts(false));
 [Bindable]
 private var colorForBK:int = 0xFFFFFF;
 [Bindable]
 private var fonts:ArrayCollection =
 new ArrayCollection(new Array("AlexandriaFLF.swf", "BPDiet.swf", "ChanpagneFont.swf", "KidsFont.swf"));
 [Bindable]
 private var regedFonts:ArrayCollection;
 [Bindable]
 private var fontNameForSample:String = "";
 ]]>
 </fx:Script>
 <s:VGroup id="panelToStuff">
 <s:HGroup>
 <s:Label id="status" text="status area" backgroundColor="{colorForBK}"/>
 <s:VGroup>
 <s:DropDownList id="availFonts" dataProvider="{fonts}" change="fontChangedHandler()" />
 <s:Button label="UnLoad" enabled="true" click="unloadCurrentFont()"/>
 <s:Button label="doSome" enabled="true" click="DoNonImportantWork()"/>
 </s:VGroup>
 </s:HGroup>
 <s:HGroup>
 <s:Button click="fontNameForSample = 'BPDiet';" label="BPDiet"/>
 <s:Button click="fontNameForSample = 'Champagne';" label="Champagne"/>
 <s:Button click="fontNameForSample = 'Kids';" label="Kids"/>
 </s:HGroup>
 <s:Label text="{regedFonts.length} reg'ed"/>
 <s:TextArea id="sampleTextArea" fontFamily="{fontNameForSample}" text="Some Sample text for your viewing"/>
 </s:VGroup>
</s:Application>
A couple things to note; I am calling System.rc() in the unloadCurrentFont() method just to speed up seeing the SWF unload in the debug console. The DoNonImportantWork() is there to just cause some events to happen and to create some objects that will need to be GC'ed. It also let me know that the fonts are not getting registered in Font.
I'm going to have 30 fonts (and more, that designer is busy) that I will need to be able to dynamically load, but right now, loading them with CSS style modules blows up after about 15 because style modules register the font so I cannot unload the CSS swf.

To help eliminate the question of whether the TextArea is being held by something else, I have removed it from the MXML, and now programatically create it. That did not help.
So, I got the trial version of Flash Builder 4 installed on another machine in the office so that I can use the profiler. (The profiler is pretty cool by the way).
After a lot of profiing, I found four paths to the module's FlexModuleFactory.
Two of those paths go to EmbeddedFontRegistry, whose data is static. I could get into it and remove font entry and free up the moduleFactory from there. This is a hack, that entry in/on EmbeddedFontRegistry.font should have been cleaned up by the code removing the fontFamily from the TextArea. (Note that EmbeddedFontRegistry is marked [ExcludeClass], which I assume means I should not really be messing with it.
The other two I cannot get to as they are anonymous. They also don't appear to be referenced, as the Object References shows them both as GC root objects. Here is a screen shot:
I did a search through the sdk code and 'fbs' only shows up as a parameter on the init function of various Marshal support classes, but is not used in the init()
Anyway, these references to the FlexModuleFactory do not get held if I do not use the embeded font in the module.
Here is the updated code:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
 xmlns:s="library://ns.adobe.com/flex/spark"
 xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="400" minHeight="400">
 <fx:Script>
 <![CDATA[
 import mx.collections.ArrayCollection;
 import mx.core.EmbeddedFont;
 import mx.core.EmbeddedFontRegistry;
 import mx.core.IEmbeddedFontRegistry;
 import mx.core.UIComponent;
 import mx.events.FlexEvent;
 import mx.events.ModuleEvent;
 import mx.managers.SystemManager;
 import mx.modules.IModule;
 import mx.modules.IModuleInfo;
 import mx.modules.Module;
 import mx.modules.ModuleManager;
 import spark.components.TextArea;
 private var _ta:TextArea = null;
 protected var _moduleInfo:IModuleInfo;
 private function LoadFontTextArea(fontSwf:String):void {
 status.text = "Loading the font pack";
 _moduleInfo = ModuleManager.getModule(fontSwf);
 // add some listeners
 _moduleInfo.addEventListener(ModuleEvent.READY, onModuleReady);
 _moduleInfo.addEventListener(ModuleEvent.ERROR, moduleLoadErrorHandler);
 _moduleInfo.addEventListener(ModuleEvent.UNLOAD, moduleUnloadHandler);
 _moduleInfo.load();
 private function onModuleReady(event:ModuleEvent):void {
 status.text = "The font pack swf Ready \n" + event.module.url;
 //All I had todo was create the module, then I could access the embeded font by name
 var fontMod:* = event.module.factory.create();
 fontMod = null;
 private function moduleLoadErrorHandler(event:ModuleEvent):void {
 status.text = "Font Module Load Error. \n" +
 event.module.url + "\n"+ event.errorText;
 private function moduleUnloadHandler(event:ModuleEvent):void {
 status.text = "Font Module Unload Event. \n" + event.module.url;
 private function fontChangedHandler():void {
 unloadCurrentFont();
 LoadFontTextArea(String(availFonts.selectedItem));
 private function unloadCurrentFont():void {
 if (_ta != null && _moduleInfo != null) {
 var fontName:String = _ta.getStyle("fontFamily");
 _ta.setStyle("fontFamily", "");
 _ta.validateProperties();
 if (_ta.textDisplay) {
 _ta.textDisplay.validateProperties();
 panelToStuff.removeElement(_ta);
 _ta = null;
 //This I should not have to do, but the framework is not doing it
 var embFontReg:IEmbeddedFontRegistry = EmbeddedFontRegistry.getInstance();
 var embFonts:Array = embFontReg.getFonts();
 for each (var curEmbFont:EmbeddedFont in embFonts){
 if (curEmbFont.fontName == fontName){
 embFontReg.deregisterFont(curEmbFont, _moduleInfo.factory);
 if (_moduleInfo != null)
 _moduleInfo.unload();
 _moduleInfo = null;
 System.gc();
 private function AddTA():void {
 _ta = new TextArea();
 _ta.text = "Some text for your viewing pleasure. " + colorForBK.toString(16);
 panelToStuff.addElement(_ta);
 private function DoNonImportantWork():void {
 colorForBK -= 0xFAA;
 if (colorForBK < 0x0) colorForBK = 0xFFFFFF;
 var foo:* = {prop1: "yea" + colorForBK.toString(), prop2:"boo" + colorForBK.toString()};
 var hmm:String = foo.prop1 + " " + foo.prop2;
 [Bindable]
 private var colorForBK:int = 0xFFFFFF;
 [Bindable]
 private var fonts:ArrayCollection =
 new ArrayCollection(new Array("AlexandriaFLF.swf", "BPDiet.swf", "ChanpagneFont.swf", "KidsFont.swf"));
 ]]>
 </fx:Script>
 <s:VGroup id="panelToStuff">
 <s:HGroup>
 <s:Label id="status" text="status area" backgroundColor="{colorForBK}"/>
 <s:VGroup>
 <s:DropDownList id="availFonts" dataProvider="{fonts}" change="fontChangedHandler()" />
 <s:Button label="UnLoad" enabled="true" click="unloadCurrentFont()"/>
 <s:Button label="AddTA" enabled="true" click="AddTA()"/>
 <s:Button label="doSome" enabled="true" click="DoNonImportantWork()"/>
 </s:VGroup>
 </s:HGroup>
 <s:Button click="_ta.setStyle('fontFamily', 'BPDiet');" label="BPDiet"/>
 </s:VGroup>
</s:Application>
I really think I've reached the end of what I can do. This really seems like a bug.

Why don't embedded fonts work inside ItemRenderers?

I'm trying to use an embedded font on a spark label inside an item renderer for a list control and it doesn't work. Works fine everywhere else.

So i think i figured out what was going on. Here is my simplified code:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
 xmlns:s="library://ns.adobe.com/flex/spark"
 xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:components="com.rtn.jccFlex.components.*" xmlns:local="*" xmlns:components1="com.ray.components.*">
 <fx:Declarations>
 
 </fx:Declarations>
 <fx:Style>
 @namespace s "library://ns.adobe.com/flex/spark";
 @namespace mx "library://ns.adobe.com/flex/mx";
 @font-face {
 src: url("/assets/Typewriter.ttf");
 fontFamily: Typewriter;
 embedAsCFF: true;
 </fx:Style>
 <mx:VBox width="100%" height="100%">
 <s:Label fontFamily="Typewriter" text="MY FONT WORKS!!" fontSize="14" />
 <s:Panel width="60%" height="100%" fontSize="18" fontWeight="bold">
 <s:Label fontFamily="Typewriter" text="MY FONT DOESNT WORKS!!" fontSize="14" />
 </s:Panel>
 </mx:VBox>
</s:Application>
It was looking for the bold version of the font since it inherited it from the parent panel. But the embed by default embeds the "normal" weight.
In our project someone wrote a common panel component that sets the content of the panel using the "DefaultProperty" and we put our list in there. So you don't really think about the container that the List and ItemRenderer sit inside, and it was very easy to overlook.
This was very painful to figure out.
Thanks for the help guys.

Embedded fonts display differently in mx and spark

Hi there,
My apologies if this is an known issue but I have not been able to find any posts describing this problem. As the title of the discussion describes the problem I see is that when embedding the same font for spark and mx components they display differently to the point of making the application look sloppy. I created a small app to illustrate the problem:
<?xml version="1.0" encoding="utf-8"?>
<s:Application
 minWidth="955" minHeight="600"
 xmlns:fx="http://ns.adobe.com/mxml/2009"
 xmlns:s="library://ns.adobe.com/flex/spark"
 xmlns:mx="library://ns.adobe.com/flex/mx">
 <fx:Declarations>
 
 </fx:Declarations>
 <fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
@font-face
src:url("arial.ttf");
fontFamily: arialCFF;
embedAsCFF: true;
@font-face {
src:url("arial.ttf");
fontFamily: arialNoCFF;
embedAsCFF: false;
advancedAntiAliasing: false;
s|Label
fontFamily: arialCFF;
fontSize: 20px;
mx|Label
fontFamily: arialNoCFF;
fontSize: 20px;
</fx:Style>
 <s:layout>
 <s:VerticalLayout
 paddingLeft="10"
 paddingTop="10"/>
 </s:layout>
 <s:Label text="This is a label that uses spark"/>
 <mx:Label text="This is a label that uses mx"/>
</s:Application>
I used the Arial.ttf font I found in my mac, though I have also tried with courier new and even the myriad web pro provided with an example in the SDK. Also I have tried with SDKs 4.1, 4.5 and 4.5.1. I have played with the value of advancedAniAliasing as well. Regardless of the combination I will still see differences such as this:
Is this a known issue? Any solutions at hand?
Thanks in advance for the help!!

Hi there,
Thanks for the quick reply. I was able to make fonts display correctly after hacking the display of some components (mx.controls.FormItem for example) however I did notice a whole buch of runtime warnings that showed up as a result of the workaround such as:
warning: incompatible embedded font 'arialCFFFont' specified for mx.core::UITextFormat. This component requires that the embedded font be declared with embedAsCFF=false.
TextFieldAutomationHelper:captureSelection() - 'selectionBeginIndex' is not implemented in FTETextField.
And in some cases for components I do not even use:
warning: incompatible embedded font 'arialCFFFont' specified for mx.controls::TextInput (TextInput1967) . This component requires that the embedded font be declared with embedAsCFF=false.
Any ideas on how to avoid this noise or do we have to live with this?

Embedded Fonts on Dynamic Label Component

Similar Messages

Maybe you are looking for