Using a CFF embedded font with an MX Label control in Flex 4

11 Responses to Using a CFF embedded font with an MX Label control in Flex 4

1. NBiehl says:

   June 17, 2009 at 9:18 am

   Will we be able to use the same css on a datagrid? I noticed the datagrid component also has the textFieldClass attribute. Applying similar css, as in your example, makes the text in the datagrid disappear.

   Reply
2. Peter deHaan says:

   June 17, 2009 at 1:09 pm

   NBiehl,

   I haven’t tried this with the Halo DataGrid yet. Can you please file a bug at http://bugs.adobe.com/flex/ and include a simple test case and myself or somebody else can take a look at it.

   Thanks,
   Peter

   Reply
3. Rob McKeown says:

   July 16, 2009 at 9:47 am

   Is there any reason why you would not want to automatically set the textFieldClass to the new TLF one? It seems like you would always want to do it in the stylesheet for all Labels (and Text too?) so that you can forget about the difference in the rest of the app.

   Reply
   • Peter deHaan says:

     July 17, 2009 at 8:30 am

     I’d probably recommend using the new UITLFTextField class wherever possible. Although I’m semi-certain that they do not work with all Halo controls, so you may not be able to set the textFieldClass style globally.

     Peter

     Reply
4. Yannick Lacaute says:

   March 12, 2010 at 6:24 am

   Hi,

   I don’t manage to embed font in TLF.

   Here is my development environment :
   – Vista
   – Flex Builder 3
   – SDK 4 (all last build tested)
   – using TLF
   – using halo (mx:Application)

   I have an XML text file (Text Layout Format, not HTML) imported at runtime (TexTConverter.importToFlow).
   In this xml I set theses options :

   fontLookup="embeddedCFF" renderingMode="cff" fontFamily="Tahoma"

   I embed the font by using an external CSS file :

   @font-face{
   	src: url("assets/font/tahomabd.ttf");
   	font-family: "Tahoma";
   	font-weight: bold;
   	embedAsCFF: true;
   }
    
    
   @font-face{
   	src: url("assets/font/tahoma.ttf");
   	font-family: "Tahoma";
   	embedAsCFF: true;
   }
    
   mx|global {
   	font-family: "Tahoma";
   	font-lookup: embedded-c-f-f;
   }

   Labels, TextInputs etc are using the embedded font but not the TLF, which display text in Times New Roman…

   Note 1 :
   I also tested to embed the font in AS :

   [Embed(source='assets/font/tahoma.ttf', embedAsCFF='true', fontName='Tahoma', mimeType='application/x-font')] 
   private static var TahomaFont:Class;

   With or without “Font.registerFont(TahomaFont);” => don’t change anything.

   Note 2 :
   When I generate a SWF Font with CS4 (by using SDK3 then SDK4) and use it like that :

   	@font-face{
   	  src: url("assets/font/tahoma.swf");
   	  font-family: "Tahoma";
   	  embedAsCFF: true;
           }

   I have a compilation error : le paramètre de transcodage embedAsCFF n’est pas pris en charge par

   flex2.compiler.media.MovieTranscoder
   If I dont set the option “embedAsCFF”, the font is embedded and works fine, except for TLF of course…

   Note 3 :
   If I don’t set the font fontLookup option in the XML text file, it works nice, the TLF use Tahoma but the font used is not

   the embedded Tahoma font (I have differents results on Linux and Vista, just for TLF texts).

   Note 4 :
   I am sure to compile with SDK 4, I even tried different SDK.

   Note 5 :
   I can’t turn my application into a Spark Application. The fact is that I have only seen TLF examples with a Spark

   Application, maybe it’s not possible to embed font in TLF with a Halo App ?

   Note 6 :
   I also tried to import TextFlow with a Configuration (for overriding options in the initial format, with CFF etc) : do

   nothing.

   Please help… I read Adobe TLF forum, many blog… and found nothing !!

   What’s wrong with this code ??
   Thanks

   Yannick

   Reply
   • Peter deHaan says:

     March 12, 2010 at 2:50 pm

     @Yannick,

     The following example works for me with mx:Application, s:Label, s:Button, s:TextInput, and s:RichEditableText controls and CFF fonts:

     <?xml version="1.0" encoding="utf-8"?>
     <mx: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">
      
         <fx:Style>
             @namespace s "library://ns.adobe.com/flex/spark";
             @namespace mx "library://ns.adobe.com/flex/mx";
      
             @font-face{
                 src: url("C:/Windows/fonts/tahomabd.ttf");
                 font-family: "TahomaCFF";
                 font-weight: bold;
                 embedAsCFF: true;
             }
      
             @font-face{
                 src: url("C:/Windows/fonts/tahoma.ttf");
                 font-family: "TahomaCFF";
                 embedAsCFF: true;
             }
      
             global {
                 font-family: "TahomaCFF";
                 font-lookup: embeddedCFF;
                 font-size: 24;
             }
         </fx:Style>
      
         <s:Label text="Spark Label" />
         <s:Button label="Spark Button" />
         <s:TextInput text="Spark TextInput" />
      
         <s:RichEditableText width="500">
             <s:textFlow>
                 <s:TextFlow>
                     <s:p>Paragraph 1 -- <s:span fontWeight="bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</s:span> Praesent nec placerat enim.</s:p>
                     <s:p>Paragraph 2 -- Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; <s:span textDecoration="underline">Aliquam volutpat tempor facilisis</s:span>.</s:p>
                 </s:TextFlow>
             </s:textFlow>
         </s:RichEditableText>
      
     </mx:Application>

     But this may depend on how complex your TextFlow is, and whether you’re trying to mix embedded and device fonts, and whether you’re trying to use a CFF embedd font with MX controls vs Spark controls, etc.

     Peter

     Reply
   • Peter deHaan says:

     March 12, 2010 at 3:06 pm

     This is probably slightly closer to your setup, but I still don’t think I can reproduce the issue you’re describing:

     <?xml version="1.0" encoding="utf-8"?>
     <mx: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"
                    creationComplete="init();">
      
         <fx:Style>
             @namespace s "library://ns.adobe.com/flex/spark";
             @namespace mx "library://ns.adobe.com/flex/mx";
      
             @font-face{
                 src: url("C:/Windows/fonts/tahomabd.ttf");
                 font-family: "TahomaCFF";
                 font-weight: bold;
                 embedAsCFF: true;
             }
      
             @font-face{
                 src: url("C:/Windows/fonts/tahoma.ttf");
                 font-family: "TahomaCFF";
                 embedAsCFF: true;
             }
      
             global {
                 font-family: "TahomaCFF";
                 font-lookup: embeddedCFF;
                 font-size: 24;
             }
         </fx:Style>
      
         <fx:Script>
             <![CDATA[
                 import flashx.textLayout.conversion.TextConverter;
                 import flashx.textLayout.elements.TextFlow;
      
                 private function init():void {
                     var tFl:TextFlow = TextConverter.importToFlow(tFlow, TextConverter.TEXT_LAYOUT_FORMAT);
                     ret.textFlow = tFl;
                 }
             ]]>
         </fx:Script>
      
         <fx:Declarations>
             <fx:String id="tFlow" source="tFlow.txt" />
         </fx:Declarations>
      
         <s:Label text="Spark Label" />
         <s:Button label="Spark Button" />
         <s:TextInput text="Spark TextInput" />
      
         <s:RichEditableText id="ret" width="500" />
      
     </mx:Application>

     And the tFlow.txt file is as follows:

     <TextFlow xmlns="http://ns.adobe.com/textLayout/2008" fontLookup="embeddedCFF" renderingMode="cff" fontFamily="TahomaCFF">
         <p>Paragraph 1 -- <span fontWeight="bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> Praesent nec placerat enim.</p>
         <p>Paragraph 2 -- Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; <span textDecoration="underline">Aliquam volutpat tempor facilisis</span>.</p>
     </TextFlow>

     Peter

     Reply
5. Yannick Lacaute says:

   March 12, 2010 at 5:51 pm

   [COMMENT PART 1 (due to spam protection...)]
   Hi Peter,

   TY for answer. If I change your application into a Spark application (s:App) : it works nice, font is embedded, same result on Linux & Vista. But, always with s:App, if I load the

   textFlow from a XML, it doesn’t work.

   Moreover, I can’t compile your example as it, because of namespaces.

   Case 1 : compile, no runtime error, but embedded font not work if xml loaded

   <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
   <mx:Script> ... </mx:Script>

   AS : with “addChild” function

   Case 2 : compile, no runtime error, but embedded font not work if xml loaded

   <s:Application
         xmlns:fx="http://ns.adobe.com/mxml/2009"
         xmlns:mx="library://ns.adobe.com/flex/mx"
         xmlns:s="library://ns.adobe.com/flex/spark">
   <fx:Script> ... </fx:Script>

   AS : with “addElement” function

   Case 3 : don’t compile

   <mx:Application
         xmlns:fx="http://ns.adobe.com/mxml/2009"
         xmlns:mx="library://ns.adobe.com/flex/mx"
         xmlns:s="library://ns.adobe.com/flex/spark">

   Error : can’t resolve mx:Application into a component

   [COMMENT PART 2 (due to spam protection...)]
   I googled many hours a few weeks ago and found nothing.
   The fact is I can run samples applications with TLF, which is in SDK4, so I am sure to use SDK4.
   – I especialy take a look here
   – different SDK4 build tested…
   – putting the globalplayers.swc of SDK4 in external in the Fx project…
   I never understood why I could’nt use mx:Application ! Maybe this is a part of the solution for embedded font in TLF (?)

   So now, my sample code

   The XML loaded :

   <TextFlow
   	xmlns="http://ns.adobe.com/textLayout/2008" whiteSpaceCollapse="collapse" paddingTop="30"
   	renderingMode="cff" fontFamily="TahomaCFF" fontLookup="embeddedCFF">
   	<p fontSize="16" textAlign="center">This must be Embedded Tahoma.
   	<span fontWeight="bold">And this must be Tahoma bold</span></p>
   </TextFlow>

   [COMMENT PART 3 (due to spam protection...)]
   The Application (I give the Spark App sample, even if I _must_ use an mx:Application)
   => given in another comment because my comment is too long…

    
    
    
    
           @namespace s "library://ns.adobe.com/flex/spark";
           @namespace mx "library://ns.adobe.com/flex/mx";
    
           @font-face{
               src: url("C:/Windows/fonts/tahomabd.ttf");
               font-family: "TahomaCFF";
               font-weight: bold;
               embedAsCFF: true;
           }
    
           @font-face{
               src: url("C:/Windows/fonts/tahoma.ttf");
               font-family: "TahomaCFF";
               embedAsCFF: true;
           }
    
           global {
               font-family: "TahomaCFF";
               font-lookup: embeddedCFF;
               font-size: 24;
           }

       	<![CDATA[
       		import mx.containers.Canvas;
    
       		    import flash.display.Sprite;
   		    import flashx.undo.UndoManager;
   		    import mx.events.ScrollEvent;
   		    import mx.events.FlexEvent;
   		    import flashx.textLayout.conversion.TextConverter;
   		    import flashx.textLayout.conversion.ConversionType;
   		    import flashx.textLayout.compose.StandardFlowComposer;
   		    import flashx.textLayout.container.ContainerController;
   		    import flashx.textLayout.container.ScrollPolicy;
   		    import flashx.textLayout.edit.EditManager;
   		    import flashx.textLayout.edit.SelectionManager;
   		    import flashx.textLayout.elements.TextFlow;
   		    import flashx.textLayout.events.CompositionCompleteEvent;
   		    import flashx.textLayout.events.SelectionEvent;
   		    import flashx.textLayout.events.StatusChangeEvent;
   		    import flashx.textLayout.events.TextLayoutEvent;
   		    import flashx.textLayout.formats.TextLayoutFormat;
   		    import flashx.textLayout.elements.Configuration;
   		    import flash.text.engine.FontLookup;
   		    import flash.text.engine.RenderingMode;
    
       		private function init():void {
                           testFont()
       			urlLoader = new URLLoader();
   			urlLoader.addEventListener(Event.COMPLETE, onXMLLoaded);	
   			urlLoader.addEventListener(IOErrorEvent.IO_ERROR, errorHandler);
   			urlLoader.load(new URLRequest(xmlURL));
       		}
    
       		private function onXMLLoaded(event:Event):void {
   	        	trace("XML loaded");
   	        	textFlowAsString = event.target.data as String;
   	        }
    
   	        private function errorHandler(event:Event):void {
   	        	trace("Can't load XML : " + event);
   	        }
    
   	        public function set textFlowAsString(text:String):void {
   			var importedTextFlow:TextFlow = TextConverter.importToFlow(text, TextConverter.TEXT_LAYOUT_FORMAT);
   			if (importedTextFlow == null) {
   				throw new Error("[SimpleTLFCanvas] set textFlowAsString : invalid string (" + text + ")");
   			} else {
   				initTextFlow(importedTextFlow);
   			}
   		}
    
   		private function initTextFlow(textFlow:TextFlow):void {
   			this.textFlow = textFlow;
   			textCanvas = new Canvas();
   			textCanvas.percentWidth = 100;
   			textCanvas.percentHeight = 100;
   			textCanvas.addEventListener(FlexEvent.CREATION_COMPLETE, onTextCanvasCreationComplete);
   			addElement(textCanvas);
   		}
    
   		private function onTextCanvasCreationComplete(event:Event):void {
   			textCanvas.removeEventListener(FlexEvent.CREATION_COMPLETE, onTextCanvasCreationComplete);
   			textContainer = new Sprite();
   			textCanvas.rawChildren.addChild(textContainer);
   			textController = new ContainerController(textContainer, textCanvas.width, textCanvas.height);
   			textFlow.addEventListener(StatusChangeEvent.INLINE_GRAPHIC_STATUS_CHANGE, graphicStatusChangeEvent);
   			textController.verticalScrollPolicy = ScrollPolicy.OFF;
    	           	textFlow.flowComposer.addController(textController); 
   				textFlow.flowComposer.updateAllControllers();
   			}
    
   		private function graphicStatusChangeEvent(event:StatusChangeEvent):void {
   			if (textFlow &amp;&amp; event.element.getTextFlow() == textFlow)
   				textFlow.flowComposer.updateAllControllers();
   		}
    
   		private function testFont():void {
   			var myEmbeddedFonts:Array = Font.enumerateFonts(false);
   			var f:Font;
    
   			for (var i:int=0; i

   In all cases, the label is ok, with the global embedded font defined.

   [COMMENT PART 4 (due to spam protection...)]
   Note 1 : I also tried to override FontMananger priority in a config file, but don’t change anything :

   flash.fonts.JREFontManager
   flash.fonts.AFEFontManager
   flash.fonts.BatikFontManager

   Note 2 : In fact, I have two problems :
   – I can’t use new namespaces with an mx:Application, I must use 2006 namespace.
   – I tested both “library://ns.adobe.com/flex/mx” and “library://ns.adobe.com/flex/halo”
   – When I use Spark App, I lose completion and syntax coloration, so it is totaly unproductive
   – I can’t embed font in TLF

   Note 3 : When I display embedded font (Font.enumerateFonts(false)) With all embedded fonts I tested, isFontCompatible is always false ! (see sample)

   Thanks for your help !

   Yannick

   Reply
6. Peter deHaan says:

   March 12, 2010 at 6:40 pm

   It looks like you’re using an old version of the Flex 4 SDK. Please update to a newer nightly version of Flex 4+ from http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4 and try again.

   Also, it may work better if you try downloading the Flash Builder 4 beta instead of using Flex Builder 3.

   Peter

   Reply
7. Anonymous says:

   March 12, 2010 at 10:18 pm

   Hi again !

   1) Sorry about my previous comment, I put my mxml code into “code” tag but it seems it didn’t work…
   2) Not without having really strange behaviours, I can now use “mx:Application” with the new namespaces by using a recent SDK4 build.
   3) Your sample works :) But you use , I didn’t… (in fact I “couldn’t”). Since I can use Spark component like R.E.T, it will be The Deliverance !! (I hope)

   The remaining problems are :
   – no code-hints and colors in files using new namespaces
   – html-template must be generated by hand for Flex Application (this is not really a problem)

   I followed the official Adobe tutorial to correct code-hints but I still have little problems, but not really important. (colors sometimes disappears, etc)

   Thanks Peter for yours replies, it will normaly correct my problem of embedded font with TLF, I will try to use some Spark component from now :)

   Yannick

   ps: I’am pretty sure there are some bugs during compilation when you create a Flex Project using SDK3 and then you change it to SDK4. Since I have started with a new workspace with the SDK4 directly set a default for creating new project, I didn’t see any problems.

   Reply
8. Yannick Lacaute says:

   March 16, 2010 at 1:38 pm

   Hi,

   I have found the real problem : -theme=${flexlib}/themes/Halo/halo.swc

   When you add this line to the compiler, the fonts in the TLF aren’t embedded anymore ! OFC, this is not the case in your sample… (with Spark components only).

   Yannick

   Reply