TextLayoutFormat.fontLookup =FontLookup.EMBEDDED_CFF breaks font?

Hi,
My Flash Player version:   10,1,50,433   (Debug version)
My Flex SDK: 4.5 downloaded from the trunk. SVN Status shows no updates required.
Font embedding is not working.   I read some other threads on this, but it's pretty confusing stuff. Perhaps I just need confirmation if there is a bug in Flex 4.5 and if it's not currently possible to embed fonts in Flex (if that is indeed the case).
Here is some my code:
    [Embed(source="/assets/MyriadPro-Bold.otf", fontFamily="Myriad Pro Bold", embedAsCFF="true")]
    private var _MyriadProBoldSubset:Class;
public function FontTest()
Font.registerFont(_MyriadProBoldSubset);
        textLayoutFormat = new TextLayoutFormat();
        textLayoutFormat.color = 0xFFFFFF;
        textLayoutFormat.renderingMode = RenderingMode.CFF;
        // Turning this off makes the text bold, turning it off makes non-bold. This indicates that font embedding is not working, so it falls back to some other font.
        textLayoutFormat.fontLookup = FontLookup.EMBEDDED_CFF;
        textLayoutFormat.textAlign = "center";
    textLayoutFormat.fontFamily = "Myriad Pro Bold";
textLayoutFormat.fontSize = 12;
textLayoutFormat.fontWeight = FontWeight.BOLD;
   var fonts = Font.enumerateFonts();
   var fooFont:Font = fonts[0];
// Traces out "Myriad Pro Bold :: true" .   This seems to confirm that the font is embedded and has the glyph I need for my "CC" button
   trace(fooFont.fontName + " :: " + fooFont.hasGlyphs("C"));
    textFlow= new TextFlow();
        paragraph = new ParagraphElement();
        span = new SpanElement;
        paragraph.addChild(span);
        textFlow.addChild(paragraph)
        var controller:ContainerController = new ContainerController(cc_btn, 18, 17);
        textFlow.flowComposer.addController(controller);
        textFlow.hostFormat = textLayoutFormat;
        span.text = "CC";
        textFlow.flowComposer.updateAllControllers();

This worked for me using Flex 4.0. If this is a new 4.5 problem that would be good to know. The dump method below is very handy for seeing what font actually was used.
 [Embed(mimeType="application/x-font", exportSymbol="MyriadProBold", embedAsCFF="true", fontWeight="bold", source="../../fonts/MyriadPro-Bold.otf", fontName="myMyriadPro")]
 private const MyriadProBold:Class;
 public function EmbedTest()
 stage.align = StageAlign.TOP_LEFT;
 stage.scaleMode = StageScaleMode.NO_SCALE;
 var textFlow:TextFlow = TextConverter.importToFlow("Hello world", TextConverter.PLAIN_TEXT_FORMAT);
 textFlow.fontLookup = FontLookup.EMBEDDED_CFF;
 textFlow.fontFamily = "myMyriadPro";
 textFlow.fontWeight = FontWeight.BOLD;
 var controller:ContainerController = new ContainerController(this,500,400);
 textFlow.flowComposer.addController(controller);
 textFlow.flowComposer.updateAllControllers();
 trace((this.getChildAt(0) as TextLine).dump());
outputs:
<?xml version='1.0' encoding='UTF-8'?>
<line ascent='9.00000000000' descent='3.00000000000' rotation='0'>
<elements>
 <glyph isEmbedded='y' fontName='myMyriadPro' isBold='y' isItalic='n' gid='41' pointSize='12.00000000000' x='0.00000000000' y='0.00000000000' rotation='0' color='#FF000000'/>
 <glyph isEmbedded='y' fontName='myMyriadPro' isBold='y' isItalic='n' gid='70' pointSize='12.00000000000' x='8.23193359375' y='0.00000000000' rotation='0' color='#FF000000'/>
 <glyph isEmbedded='y' fontName='myMyriadPro' isBold='y' isItalic='n' gid='77' pointSize='12.00000000000' x='14.56787109375' y='0.00000000000' rotation='0' color='#FF000000'/>
 <glyph isEmbedded='y' fontName='myMyriadPro' isBold='y' isItalic='n' gid='77' pointSize='12.00000000000' x='17.86767578125' y='0.00000000000' rotation='0' color='#FF000000'/>
 <glyph isEmbedded='y' fontName='myMyriadPro' isBold='y' isItalic='n' gid='80' pointSize='12.00000000000' x='21.16748046875' y='0.00000000000' rotation='0' color='#FF000000'/>
 <glyph isEmbedded='y' fontName='myMyriadPro' isBold='y' isItalic='n' gid='1' pointSize='12.00000000000' x='28.09130859375' y='0.00000000000' rotation='0' color='#FF000000'/>
 <glyph isEmbedded='y' fontName='myMyriadPro' isBold='y' isItalic='n' gid='88' pointSize='12.00000000000' x='30.51513671875' y='0.00000000000' rotation='0' color='#FF000000'/>
 <glyph isEmbedded='y' fontName='myMyriadPro' isBold='y' isItalic='n' gid='80' pointSize='12.00000000000' x='39.44335937500' y='0.00000000000' rotation='0' color='#FF000000'/>
 <glyph isEmbedded='y' fontName='myMyriadPro' isBold='y' isItalic='n' gid='83' pointSize='12.00000000000' x='46.36718750000' y='0.00000000000' rotation='0' color='#FF000000'/>
 <glyph isEmbedded='y' fontName='myMyriadPro' isBold='y' isItalic='n' gid='77' pointSize='12.00000000000' x='50.89111328125' y='0.00000000000' rotation='0' color='#FF000000'/>
 <glyph isEmbedded='y' fontName='myMyriadPro' isBold='y' isItalic='n' gid='69' pointSize='12.00000000000' x='54.19091796875' y='0.00000000000' rotation='0' color='#FF000000'/>
 <glyph isEmbedded='y' fontName='myMyriadPro' isBold='y' isItalic='n' gid='1' pointSize='12.00000000000' x='61.34277343750' y='0.00000000000' rotation='0' color='#FF000000'/>
</elements>
<clusters>
 <cluster xLeft='0.00000000000' xCenter='4.13378906250' xRight='8.25000000000' cursorOnLeft='n' cursorOnRight='y' wordBoundaryOnLeft='y' wordBoundaryOnRight='n'/>
 <cluster xLeft='8.25000000000' xCenter='11.39990234375' xRight='14.56787109375' cursorOnLeft='y' cursorOnRight='y' wordBoundaryOnLeft='n' wordBoundaryOnRight='n'/>
 <cluster xLeft='14.56787109375' xCenter='16.21777343750' xRight='17.86767578125' cursorOnLeft='y' cursorOnRight='y' wordBoundaryOnLeft='n' wordBoundaryOnRight='n'/>
 <cluster xLeft='17.86767578125' xCenter='19.51757812500' xRight='21.16748046875' cursorOnLeft='y' cursorOnRight='y' wordBoundaryOnLeft='n' wordBoundaryOnRight='n'/>
 <cluster xLeft='21.16748046875' xCenter='24.62939453125' xRight='28.09130859375' cursorOnLeft='y' cursorOnRight='y' wordBoundaryOnLeft='n' wordBoundaryOnRight='y'/>
 <cluster xLeft='28.09130859375' xCenter='29.30322265625' xRight='30.51513671875' cursorOnLeft='y' cursorOnRight='y' wordBoundaryOnLeft='y' wordBoundaryOnRight='y'/>
 <cluster xLeft='30.51513671875' xCenter='35.06884765625' xRight='39.53320312500' cursorOnLeft='y' cursorOnRight='y' wordBoundaryOnLeft='y' wordBoundaryOnRight='n'/>
 <cluster xLeft='39.53320312500' xCenter='42.90527343750' xRight='46.36718750000' cursorOnLeft='y' cursorOnRight='y' wordBoundaryOnLeft='n' wordBoundaryOnRight='n'/>
 <cluster xLeft='46.36718750000' xCenter='48.64697265625' xRight='50.90917968750' cursorOnLeft='y' cursorOnRight='y' wordBoundaryOnLeft='n' wordBoundaryOnRight='n'/>
 <cluster xLeft='50.90917968750' xCenter='52.54101562500' xRight='54.19091796875' cursorOnLeft='y' cursorOnRight='y' wordBoundaryOnLeft='n' wordBoundaryOnRight='n'/>
 <cluster xLeft='54.19091796875' xCenter='57.76660156250' xRight='61.34277343750' cursorOnLeft='y' cursorOnRight='y' wordBoundaryOnLeft='n' wordBoundaryOnRight='y'/>
 <cluster xLeft='61.34277343750' xCenter='62.55468750000' xRight='63.76660156250' cursorOnLeft='y' cursorOnRight='y' wordBoundaryOnLeft='y' wordBoundaryOnRight='y'/>
</clusters>
</line>

Similar Messages

Installing KB3013455 breaks font rendering on Server 2008 x32

Hi
It appears that after installing KB3013455 none of my fonts render properly anymore.
It causes font display/smoothing/substitution corruption in all applications - I first noticed it in several different browsers, but then just went to Control Panel -> Fonts and confirmed that all fonts (checked a dozen) including Arial and Times New
Roman are affected.
Essentially the small fonts (8-20pt) that normally result in a one-pixel line (think of lowercase "b" or "t" or "d") would now be a random mess between 1 and 2 pixels. Turning on "Clear Type" or font smoothing does
"smooth" the garbage and it doesn't look as awful but that doesn't make the text any more readable.
Actually "font smoothing" didn't quite work as it did not affect the small fonts (which were the affected ones) - only Clear Type smoothed them.
Also, all fonts appeared much smaller - a 16pt font appeared as big as 8pt, and I might be off with the scale but definitely much smaller.
While researching the issue I found that a similar one happened some time ago - the picture posted there also matches somewhat the symptoms I saw:
http://askubuntu.com/questions/520044/unreadable-font-on-gmail-since-recent-updates-in-chromium
Also, the issue seems to apply to XP, Server 2003, Vista and other versions as per
http://www.dslreports.com/forum/r29852995-
I noticed this on a Server 2008, x32, with font smoothing and Clear Type turned off, normal font size (96dpi).
The question:
https://support.microsoft.com/kb/3013455 appears to be an important update so I'd appreciate any insights as to what other steps can we take.
Thanks
p.s. I forgot to take screenshots before I uninstalled the update. I'm not sure if you need one - I'd prefer to skip the pain of installing it and rebooting just for the sake of taking a screenshot (and then removing it again and rebooting again), but if
that's a must let me know.

I've done some more testing - Win7 (both x32 and x64) seems to be unaffected.
Vista/2008/2003 (tested 32bit only) are all affected.
Here are some screenshots -
before:
and after:

Unable to apply embedded font swf to text in text layout framework

Hello,
We have created a swf for a given font (for e.g., Calibri.swf) which contains all the styles (Regular, Italic, Bold, BoldItalic).
We have created a xml which lists the name of the font and the corresponding swf file path. The names from the xml are loaded into a combo box in the application.
When we try to apply the selected font to a text in the text layout framework, it does not apply the same. It sets the font to default "Times" font.
Following is a snippet of code to apply the font to the text:
private function selectFont(fontXML:XML):void {
                var path:String = fontXML.@source;
                var myEvent:IEventDispatcher = styleManager.loadStyleDeclarations(FlexGlobals.topLevelApplication.url.substring(0,FlexGl obals.topLevelApplication.url.lastIndexOf("/"))+"/"+path);
                myEvent.addEventListener(StyleEvent.COMPLETE, function(event:StyleEvent):void{
                    var editManager:EditManager = textFlow.interactionManager as EditManager;
                    var itextLayout:TextLayoutFormat = new TextLayoutFormat();
                    itextLayout.fontSize = 20;
                    var fontName:String = fontXML.@name;
                    Alert.show(fontName);
                    itextLayout.fontFamily = fontName;
                    Alert.show( "itext = " + itextLayout.fontFamily);
                    editManager.applyFormat(itextLayout,itextLayout,itextLayout);
                    var flowLeafElement:FlowElement = textFlow.findLeaf(editManager.anchorPosition) as FlowElement;
                    editManager.changeStyleName(fontName,flowLeafElement);
Can anyone please let us know what is missing in the implementation?
Thanks in advance.
Vikram

My recommendation: unless you really care about ISWFContext implementations and the application domain issues, ignore Alex's post about embedded fonts.
It is a nice discussion about the inner workings of the domain and security of how this works but it is imho broken and is an insane concept to require an ISWFContext to just use an embedded font. It also breaks runtime CSS loading that has fonts embedded in it because the Flex compiler (last I checked) was also busted – it doesn't include the function necessary to create within context the font embed so that it may be applied. You can't create an ISWFContext with a compiled CSS file.
These issues were introduced in the last Flex SDK beta before FB4 was released in final form. There are multiple bugs logged against the issue of applying loaded font files to TLF text (in short, SWFContext is broken and you have to override GlobalSettings.resolveFontLookupFunction to return embedded or null, all the time).
Here's some more details to get you started - with links to at least one of the SDK bugs that were filed:
http://forums.adobe.com/message/2656152
For example:
import flashx.textLayout.elements.GlobalSettings;
import flash.text.engine.FontLookup;
GlobalSettings.resolveFontLookupFunction = function makeValid():String { return FontLookup.EMBEDDED_CFF };
And you may need to do this after your font is loaded:
yourTextBlock.textFlow.invalidateAllFormats();
Disclaimer: I haven't seen the latest Flex SDK release to see if this was fixed. I have an AIR application with native process that builds embedded font SWF files for use and stub code for FB4 usage but haven't updated to the latest SDK yet to see if it's working properly.
Anyhow, your best bet is to look at the Flash Builder forums. I think this is/was a Flex team issue, not TLF.

Flex 4 Release Build breaks text editor

I was working on an editor using FB4 beta 2. Fonts were loaded at runtime ... CFF is being used.
In Flex 4 SDK that comes with FB4 beta 2, my spark rich text field sitting in a group in my application looks fine - proper font families applied and renders correctly. My font + style drop down lists are all fine as well.
As soon as I switch to the release SDK, or any SDK later than FB4 beta 2 (well, major releases) the font styles are not longer properly applied to the field. Changes to the family no longer apply to the rich text field.
The rich editable text that I'm using is basically as follows:
 <s:RichEditableText id="editor" fontLookup="embeddedCFF" renderingMode="cff"
 focusEnabled="false" x="100" y="50" focusIn="focusInEditor(event)" focusOut="focusOutEditor(event)"
 width="300" height="200">
 <s:textFlow>
 <s:TextFlow fontFamily="HelveticaNeueLTStd-MdCn">
 <s:p fontFamily="HelveticaNeueLTStd-MdCn" fontSize="14" color="0x999999">Test first line of text</s:p>
 <s:p fontFamily="HelveticaNeueLTStd-Blk" fontSize="18" color="0xFFFFFF">Test second line of text</s:p>
 </s:TextFlow>
 </s:textFlow>
 </s:RichEditableText>
That probably isn't too important but I figured I would paste it anyway. I'm using setFormatOfRange primarily and this block of textFlow was only to get some initial content into the text area.
There is a ton of other related code for editing, selection, etc. It seems any font family related change does not get applied.
I know there have been a ton of changes and this may be difficult to pin down. However, this is pretty awkward. The application I was building loaded up fine, fonts loaded up all fine and all editing worked perfectly until going to release SDK.
Is there any change that would cause this to happen?

Ok, so I finally got it working but this is not ideal at all. Adobe really needs to give us some direction on how to properly deal with font embedding and TLF now that the release build breaks all functionality with loading runtime fonts and TLF.
Problem:
I am embedding collections of fonts (faces) into single family classes. Each individual face is registered with Font.registerFont(). I need to do this because I have to have mixed fonts within text flows - at least according to Alex H's recent blog post.
Fonts do not display in TLF without doing the following:
1. GlobalSettings.resolveFontLookupFunction = null;
2. editor.textFlow.flowComposer.swfContext = ISWFContext(this.getFontContext("AnyFamilyNameFromAnyFontEmbedded", false, false, FontLookup.EMBEDDED_CFF));
3. Instead of #2, use editor.textFlow.invalidateAllFormats();
Either #2 or #3 need to be performed. If I have a spark richEditableText control in MXML with defined familes from the loaded fonts. I even tried placing the control into a separate state so it wasn't created until after the fonts were loaded... I still needed to invalidate the formats or set the context.
The "AnyFamilyNameFromAnyFontEmbedded" does not need to be all of the embedded family names. It only needs to be one of them. Once one is used, all embedded fonts work. Also, I have to use the internal namespace to even get access to getFontContext, another oddity that, in my humble opinion, should never be necessary to create mixed style TLF content.
My questions are then:
1. Why am I required to use ISWFContext if I am using Font.registerFont()?
2. Why is GlobalSettings.resolveFontLookupFunction = null; also required for this to work?
3. What is the recommended workflow to embed fonts from multiple SWF files into the release build and have it work without having to jump through all these hoops?

Embedded CFF font not working in TLF in latest stable build and higher (4.0.0.13875)

Hi there,
We are using embedded fonts with the TLF framework and since upgrading to the latest nightly build or the stable build, it stopped working. Here is a short example:
<?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="1024" minHeight="768" xmlns:mx1="library://ns.adobe.com/flex/halo">
 <fx:Style>
 @font-face {
 embedAsCFF: true;
 fontFamily: "Courier";
 src: url("COURIER.otf");
 advancedAntiAliasing: true;
 fontStyle: normal;
 fontWeight: normal;
 </fx:Style>
 <fx:Declarations>
 <s:TextFlow id="tf" fontSize="20">
 <s:p fontFamily="Courier" fontLookup="embeddedCFF">hallo is dit courier?</s:p>
 <s:p>hallo is dit courier?</s:p>
 </s:TextFlow>
 </fx:Declarations>
 <s:VGroup>
 <s:RichEditableText textFlow="{tf}" />
 </s:VGroup>
</s:Application>
Any idea why it doesn't work anymore. The same example works fine compiling with build; 4.0.0.11686.
Thanks,
marcel panse

Hi Guys,
I sort of figured out a figured out a solution/workaround:
<?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="1024" minHeight="768" xmlns:mx1="library://ns.adobe.com/flex/halo"
 creationComplete="onCreationComplete()">
 <fx:Style>
 @font-face {
 embedAsCFF: true;
 fontFamily: CourierCFF;
 src: url(c:/windows/fonts/COUR.ttf);
 fontStyle: normal;
 fontWeight: normal;
 </fx:Style>
 <fx:Script>
 <![CDATA[
 import flashx.textLayout.compose.ISWFContext;
 import flashx.textLayout.formats.ITextLayoutFormat;
 import flashx.textLayout.elements.GlobalSettings;
 import flash.text.engine.FontLookup;
 import flash.text.engine.RenderingMode;
 import flashx.textLayout.elements.TextFlow;
 import flashx.textLayout.elements.SpanElement;
 import flashx.textLayout.elements.ParagraphElement;
 import flashx.textLayout.container.ContainerController;
 import flashx.textLayout.formats.TextLayoutFormat;
 import flashx.textLayout.elements.Configuration;
 import flashx.textLayout.compose.IFlowComposer;
 import flash.text.engine.FontLookup;
 use namespace mx_internal;
 private function onCreationComplete():void {
 createTextFlow();
 private function createTextFlow():TextFlow {
 var config:Configuration = new Configuration();
 var textLayoutFormat:TextLayoutFormat = new TextLayoutFormat();
 textLayoutFormat.fontFamily = "CourierCFF";
 textLayoutFormat.fontLookup = FontLookup.EMBEDDED_CFF;
 textLayoutFormat.renderingMode = RenderingMode.CFF;
 config.textFlowInitialFormat = textLayoutFormat;
 var textFlow:TextFlow = new TextFlow(config);
 var p:ParagraphElement = new ParagraphElement();
 var span:SpanElement = new SpanElement();
 span.text = "Is dit courier?";
 p.addChild(span);
 textFlow.addChild(p);
 var flowComposer:IFlowComposer = textFlow.flowComposer;
 //option 1: This fixes the problem, but i'm not sure why it works without a fontLookupFunction? Does it default to embedded?
 //you could also specify your own function always returning embedded, but that would just resolve to the same behaviour..
 GlobalSettings.resolveFontLookupFunction = null;
 //option 2: I guess this is the more proper solution, specifying the swfContext. Only what context to choose?
 //every font has its own css/swf and thus context. A paragraph can select a font (and the bold/italic options),
 //which font to choose here if there are multiple fonts used in the textflow?
 textFlow.flowComposer.swfContext = ISWFContext(this.getFontContext("CourierCFF", false, false, FontLookup.EMBEDDED_CFF));
 var cc:ContainerController = new ContainerController( mainText, 200, 200 );
 flowComposer.addController( cc );
 flowComposer.updateAllControllers();
 return textFlow;
 ]]>
 </fx:Script>
 <s:VGroup>
 <s:NumericStepper /> 
 <mx:UIComponent id="mainText"/>
 </s:VGroup>
</s:Application>
Option 1, setting GlobalSettings.resolveFontLookupFunction to null. Fixes the problem, but i'm not sure why it works without a fontLookupFunction? Does it default to embedded? You could also specify your own function always returning embedded, but that would just resolve to the same behaviour..
Option 2, specify the context: I guess this is the more proper solution, specifying the swfContext. Only what context to choose? Every font has its own css/swf and thus context. A paragraph can select a font (and the bold/italic options), which font to choose here if there are multiple fonts used in the textflow?

Apply embedded fonts to special characters in spark textArea using tlf

By setting fontfamily directly to textarea in mxml fonts get applied to special characters. But using tlf and setting fontfamily it does not apply.
style.css ::
@font-face
    src: URL("/Assets/Fonts/GandhariUnicode-Bold.otf");
    fontFamily: "GandhariUnicode-Bold";
    embedAsCFF: true;
snippet of source code ::
textArea.textFlow.interactionManager.selectRange(beginIndex, endIndex);
var textLayoutFormat:TextLayoutFormat = getTextLayoutFormat();
textLayoutFormat.fontLookup = FontLookup.EMBEDDED_CFF;
textLayoutFormat.fontFamily ="GandhariUnicode-Bold";
textLayoutFormat.renderingMode = RenderingMode.CFF;

Please try the code as follows.
(1)
[Embed(mimeType="application/x-font", exportSymbol="GandhariUnicode-Bold", embedAsCFF="true", fontWeight="bold", source="Assets/Fonts/GandhariUnicode-Bold.otf", fontName="gandhariUnicode-Bold")]
var GandhariUnicode-Bold:Class;
var textLayoutFormat:TextLayoutFormat = new TextLayoutFormat();
textLayoutFormat.fontLookup = FontLookup.EMBEDDED_CFF;
textLayoutFormat.fontFamily ="gandhariUnicode-Bold";
textLayoutFormat.renderingMode = RenderingMode.CFF;
textArea.textFlow.hostFormat = textLayoutFormat;
textArea.textFlow.flowComposer.updateAllControllers();
Or (2)
[Embed(mimeType="application/x-font", exportSymbol="GandhariUnicode-Bold", embedAsCFF="true", fontWeight="bold", source="Assets/Fonts/GandhariUnicode-Bold.otf", fontName="gandhariUnicode-Bold")]
var GandhariUnicode-Bold:Class;
textArea.textFlow.fontLookup = FontLookup.EMBEDDED_CFF;
textArea.textFlow.fontFamily ="gandhariUnicode-Bold";
textArea.textFlow.renderingMode = RenderingMode.CFF;
textArea.textFlow.flowComposer.updateAllControllers();

Embedded Fonts Problem

Hi,
I'm trying to emebed some fonts, but I haven't been able to get it working.
I'm using this code in a style sheet:
 @font-face{
 src: url("../assets/fonts/lsans.ttf");
 fontFamily: LucidaSansV;
 embedAsCFF:true;
 @font-face{
 src: url("../assets/fonts/ROCK.TTF");
 fontFamily: RockwellV;
 embedAsCFF:true;
 @font-face{
 src: url("../assets/fonts/times.ttf");
 fontFamily: TimesV;
 embedAsCFF:true;
if I use the fontFamily in Spark labes, it works:
<s:Label text="Some text here" fontSize="40" fontFamily="LucidaSansV" />
<s:Label text="Some text here" fontSize="40" fontFamily="TimesV" />
<s:Label text="Some text here" fontSize="40" fontFamily="RockwellV" />
But if I use it like this, doesn't work either:
var cf:TextLayoutFormat = new TextLayoutFormat();
cf.fontFamily = 'TimesV';
cf.fontLookup = flash.text.engine.FontLookup.EMBEDDED_CFF;
cf.renderingMode = flash.text.engine.RenderingMode.CFF;
Aslo, I've tried using formatted text, like "ABCDEFGHIJKLM 18" with no luck.
The behaivor should be oposite, if I declare embedAsCFF:true;, I should be ablke to use it in FTE components and embedAsCFF:false with the old MX components. what am I missing?
tks.

I wanted to update the post just in case someone has the same problem.
I created a ActionScript Library with a class for each font I need and drop the swc to the project where I need to use the fonts.
In the project, I just need to do this before using the font:
new ArialFont();
Each class looks like this:
package
 import flash.text.Font;
 public class ArialFont
 [Embed(source='assets/fonts/arial.ttf', fontName='ArialV', mimeType='application/x-font', embedAsCFF="true")]
 private static var ArialF:Class;
 [Embed(source='assets/fonts/arialbd.ttf', fontName='ArialV', fontWeight="bold", mimeType='application/x-font', embedAsCFF="true")]
 private static var ArialBoldF:Class;
 [Embed(source='assets/fonts/ariali.ttf', fontName='ArialV', fontStyle="italic", mimeType='application/x-font', embedAsCFF="true")]
 private static var ArialItalicF:Class;
 [Embed(source='assets/fonts/arialbi.ttf', fontName='ArialV', fontWeight="bold", fontStyle="italic", mimeType='application/x-font', embedAsCFF="true")]
 private static var ArialBoldItalicF:Class;
 public function ArialFont()
 Font.registerFont( ArialF );
 Font.registerFont( ArialBoldF );
 Font.registerFont( ArialItalicF );
 Font.registerFont( ArialBoldItalicF );
Hope this helps someone.

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

Dnyamic Custom Font Embedding To Textflow

Hello all,
I am creating a browser based editor application using the Rich Editable Text control. I have a user defined set of fonts in different swf files. I am loading those swf files at run-time. Here is the part of code below.
// Registers the fonts :
I have loaded swf file at run time using the Loader and then registered the loaded font to global font list.
var FontClass:*;
var dom:ApplicationDomain = event.target.applicationDomain;
FontClass = dom.getDefinition(fileName) as Class;
Font.registerFont(FontClass);
/* This works Fine !!! */
Now I am trying to apply the loaded font to textflow with the code :
var cf:TextLayoutFormat = new TextLayoutFormat();
cf.fontLookup = FontLookup.EMBEDDED_CFF;
cf.renderingMode = RenderingMode.CFF;
cf.fontSize = mFontSize;
cf.fontFamily = mFontName;
var editManager: IEditManager = IEditManager(mTxtFlow.interactionManager);
editManager.applyLeafFormat(cf);
So, far I am using the device fonts its working fine and I am able to apply the font and when I am applying the custom font its not being applied but when I am exporting the textflow, it returns me the applied font name (i.e. custom font name I applied above).
One more question I would like to ask. I have different swf files (with same name and different url) for a single font with different styles like ClearviewATT-Regular,ClearviewATT-Bold,ClearviewATT-BoldItalic,ClearviewATT-Light. What will Flex do in this case, because for Flex all swf files having same name. Would it register the first swf only , all the swf's or the last one? What should I do in this case.
Please Help.

Thanks Rob,
I know about font face but, when you export your flash banner, with Adobe Flash CC, as HTML5 - You get canvas and javascript. I generate a text from txt file and it works perfect, however i need to find a way to embed custom font type for that text that I`m importing. I can`t do that in HTML because only HTML there is canvas, and once canvas is created I can`t do anything because it`s an image. So i need a way to embed font in javascript. As I`m familiar, adobe flash doesn`t have that option.
Hope I was clear this time
thanks again

Font issues after import

I'm working on an application that uses embedded fonts. After the initial import, the fonts do not render correctly, when I use several fonts.
If after the import I change the font, it works correctly.
Any idea will be truly appreciated.

I'm probably missing something. Here's my code:
textFlow = TextConverter.importToFlow( xml, TextConverter.TEXT_LAYOUT_FORMAT);
textFlow.flowComposer = new StandardFlowComposer();
if( editManager == null && undoManager == null){
     undoManager = new UndoManager();
     editManager = new EditManager( undoManager );
     textFlow.interactionManager = editManager;
     textFlow.interactionManager.selectRange(0,0);
textFlow.flowComposer.updateAllControllers();
I replaced "textFlow.flowComposer.updateAllControllers();" with:
var cf:TextLayoutFormat = new TextLayoutFormat();
cf.fontLookup = flash.text.engine.FontLookup.EMBEDDED_CFF;
IEditManager( textFlow.interactionManager ).applyLeafFormat(cf);
but still get the same result. The font doesn't render correctly after the import.

Embedded fonts with rich editable text

Hi, I am trying to use my embedded fonts in rich editable text field, but it only works for users that already have that font installed on their system.
This is what I do.
I embed fonts like this:
 @font-face {
 src:url("fonts/Cantarell-Regular.ttf");
 fontFamily: Cantarell;
 advancedAntiAliasing: true;
 @font-face {
 src:url("fonts/Cantarell-Bold.ttf");
 fontFamily: Cantarell;
 fontWeight: bold;
 advancedAntiAliasing: true;
Then in my DropDownList (id=fontPicker) I add a new string entry that references my new font (in this case "Cantarell")
I have a custom item renderer which makes sure to print out the name of the font using the font itself, so that for example font name "Cantarell" will be printed out using Cantarell font. Code in my custom font item renderer looks like this:
<s:Label id="labelDisplay"
 fontFamily="{data}"
 verticalCenter="0"
 left="3" right="3" top="6" bottom="4"/>
And this part works, even if you dont have the font installed on your system, the name of the font is displayed propperly.
The thing that I want to do is to select some text in my rich editable text field and change the font of the selected text depending on what user selected from the dropdownlist. I added an event which is called once user selects new font type, and it performs following code on the selection in rich editable text:
 if(fontPicker.selectedIndex == -1){
 //user did not select anything, we do not change the font
 text.setFocus();
 return;
 //we get the text layout format of the selected text
 var txtLayFmt:TextLayoutFormat = text.getFormatOfRange(null,text.selectionAnchorPosition,text.selectionActivePosition);
 //we change fontFamily of the selected text to the font that we just picked
 txtLayFmt.fontFamily = fontPicker.selectedItem;
 // I even tryed to add those two following lines without much help
 //txtLayFmt.fontLookup = FontLookup.EMBEDDED_CFF;
 //txtLayFmt.renderingMode = RenderingMode.CFF;
 // we update our selected text with new font
 text.setFormatOfRange(txtLayFmt,text.selectionAnchorPosition,text.selectionActivePosition );
 text.setFocus();
This code works perfect if user has the font installed on their system but it does not work if they dont have the font even if I embed the font.
What I am doing wrong, any suggestions, tips, links?
Thanks,
Dal

Thanks I will take a look at your blogs, maybe I find some explanations.
Once it comes to my problem, I found a solution, I just needed to add a simple style:
 .mystyle1 {
 fontFamily:Cantarell;
and set the styleName of my text to it:
text.styleName = "mystyle1";
Afterwards I can dynamically change fonts and sizes of the text selections in my rich editable text field as much as I like.
Also I need to make sure that I set embed-as-cff: true;
 @font-face {
 src:url("fonts/Cantarell-Bold.ttf");
 fontFamily: Cantarell;
 fontWeight: bold;
 advancedAntiAliasing: true;
 embed-as-cff: true;
I hope this helps someone.
And if anyone has explanation to why embedded fonts work only after I change styleName of a text to a random style, please share with me.
Cheers,
Dal.

Possible to use embedded font in TLFTextField, with TextFormat?

I want to be able to dynamically change the font in a TLFTextField to an embedded font (not a device font). I'm using Flash CS5.
The only way I've found a TLFTextField will use an embedded font is if the on-stage TLFTextField has been set to use that font through the Flash UI. The example code I've found online (Font.registerFont etc) all works fine for a TextField, but not TLFTextField.
Below is a very simple piece of code that I expected to work. I have a font (Earwig Factory) embedded in my library (as DF4, linkage "Earwig"), and the isFontCompatible trace call prints "true", but still it is using the device font - if I remove the system font from my machine (or view the SWF on another machine) it falls back to Times New Roman.
Can anyone give a very simple example of a TLFTextField dynamically selecting an embedded font? Eventually I would like to store my fonts in a separate SWC / SWF, but for now just working out of the Library would be a good start.
Thanks,
Grant
import flash.text.TextFormat;
import flash.text.AntiAliasType;
import flash.text.FontStyle;
import fl.text.TLFTextField;
import flash.text.engine.FontLookup;
var format:TextFormat = new TextFormat();
format.font = "Earwig Factory"
trace("Earwig Factory isFontCompatible: " + tf.isFontCompatible("Earwig Factory", FontStyle.REGULAR) );
tf.defaultTextFormat = format;
tf.embedFonts = true;
//tf.antiAliasType = AntiAliasType.ADVANCED;
tf.setTextFormat(format);
//tf.textFlow.fontLookup = FontLookup.EMBEDDED_CFF;

Ok, I have some success - I can get an on-stage TLFTextField to dynamically use an embedded font. However, this is quite complex, and doesn't use a TextFormat. And is this seriously the way Adobe intends us to do it - if so perhaps this should be documented better?
import fl.text.TLFTextField;
import flashx.textLayout.formats.TextLayoutFormat;
import flashx.textLayout.elements.TextFlow;
import flash.text.TextFormat;
import flash.text.AntiAliasType;
import flash.text.FontStyle;
import flash.text.Font;
import flash.text.engine.FontLookup;
import flashx.textLayout.edit.ISelectionManager;
import flashx.textLayout.edit.EditManager;
import flashx.textLayout.edit.SelectionState;
var updateTF:TLFTextField = stageTF;
var applyFont:Font = new Earwig();
updateTF.embedFonts = true;
var tlfFormat:TextLayoutFormat = new TextLayoutFormat();
tlfFormat.fontFamily = applyFont.fontName;
tlfFormat.fontLookup = FontLookup.EMBEDDED_CFF;
updateTF.textFlow.invalidateAllFormats();
updateTF.textFlow.hostFormat = tlfFormat;
var prevManager:ISelectionManager = updateTF.textFlow.interactionManager;
var editManager:EditManager = new EditManager();
var sel:SelectionState = new SelectionState(updateTF.textFlow, 0, updateTF.text.length);
updateTF.textFlow.interactionManager = editManager;
editManager.applyLeafFormat(tlfFormat, sel);
updateTF.textFlow.interactionManager = prevManager;
updateTF.textFlow.flowComposer.updateAllControllers();

Embedded fonts not working

embedded fonts aren't working for me in TextFlow. The non-embedded/pre-included fonts are working fine but if i try to add my own font, it doesn't work.
i have the font set to DF4 and i have it exported for ActionScript with a class name.
the font i'm using specificaly is Kozuka Gothic Pro L, which is OpenType.
any ideas what's wrong here?
if you need me to provide any more data pls let me know.

pertinent as code:
 private function startLoadingXML():void {
 titleLdr = new URLLoader();
 titleLdr.addEventListener(Event.COMPLETE, loadComplete);
 titleLdr.addEventListener(IOErrorEvent.IO_ERROR, loadError);
 titleContent = new String();
 titleContainer = new Sprite();
 this.addChild(titleContainer);
 titleContainer.x = 40;
 titleContainer.y = 837;
 titleFlow = new TextFlow();
 titleLdr.load(new URLRequest("XML/titleLdr.txt"));
 titleTxtOutput.text="Loading an external file...";
 trace("Loading an external file...");
 public function loadComplete(e:Event):void {
 titleContent = titleLdr.data;
 titleTxtOutput.text="An external text file, markup.txt, was loaded.";
 trace("An external text file, markup.txt, was loaded.");
 titleLdr.removeEventListener(Event.COMPLETE, loadComplete);
 titleLdr.removeEventListener(IOErrorEvent.IO_ERROR, loadError);
 placeIconTitle();
 function loadError(e:IOErrorEvent):void {
 titleTxtOutput.text = "Error loading an external file.";
 trace("Error loading an external file.");
 private function placeIconTitle():void {
 titleFlow = TextConverter.importToFlow(titleContent, TextConverter.TEXT_LAYOUT_FORMAT);
 titleFlow.flowComposer.addController(new ContainerController(titleContainer, 400, 400));
 titleFlow.flowComposer.updateAllControllers();
 //titleFlow.fontLookup = FontLookup.EMBEDDED_CFF;
which leads to the text:
<TextFlow color="#FFFFFF" columnCount="0" columnGap="0" columnWidth="0" fontFamily="Meiryo" fontSize="14" lineBreak="toFit" paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0" paragraphSpaceAfter="0" paragraphSpaceBefore="0" verticalAlign="top" whiteSpaceCollapse="preserve" textAlpha="1" xmlns="http://ns.adobe.com/textLayout/2008">
 
 subTitle
 
 
 maintitle
 
</TextFlow>

Quick Embedded Fonts Question

For some reason I can't seem to get any embedded fonts to show up. Can anyone explain why the following doesn't work?
Using the newest Flash Builder.
Thanks!
-Dave
<?xml version="1.0" encoding="utf-8"?>
<mx:Application initialize="init();" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" >
 <fx:Style>
 @font-face {
 src: url("assets/arial.ttf");
 fontFamily: "Arial";
 embedAsCFF: true;
 </fx:Style>
 <fx:Script>
 <![CDATA[
 import flashx.textLayout.container.ContainerController;
 import flashx.textLayout.conversion.TextConverter;
 import flashx.textLayout.elements.TextFlow;
 import flash.text.engine.FontLookup;
 import flash.text.engine.RenderingMode;
 import mx.core.UIComponent;
 private var textFlow:TextFlow;
 private var textHolder:UIComponent = new UIComponent();
 private var sprite:Sprite = new Sprite();
 private function init():void
 var theText : String = '<TextFlow xmlns="http://ns.adobe.com/textLayout/2008" fontFamily="Arial" fontSize="100">Some Text Here</TextFlow>';
 textFlow = TextConverter.importToFlow(theText, TextConverter.TEXT_LAYOUT_FORMAT);
 textFlow.fontLookup = FontLookup.EMBEDDED_CFF;
 textFlow.renderingMode = RenderingMode.CFF;
 textFlow.flowComposer.addController(new ContainerController(sprite, 500,500));
 textHolder.addChild(sprite);
 addChild(textHolder);
 textFlow.flowComposer.updateAllControllers();
 ]]>
 </fx:Script>
</mx:Application>

All of this did not work for me unless I "used" the font in the RichEditableText Component by adding 'fontFamily="myFont"' as a property to the RichEditableText control, too (see the code below).
This is kinda messy -- please, fix that, let us use fonts with confidence in Flash (finally).
-- David
 <fx:Script>
 <![CDATA[
 override public function set data(value:Object):void
 var xml:XML = <TextFlow fontFamily="Arial" fontLookup="embeddedCFF" fontSize="13" renderingMode="cff" whiteSpaceCollapse="preserve" xmlns="http://ns.adobe.com/textLayout/2008">

 Ein kritischer Blick in die Nachbarschaft:
</TextFlow>;
 var textFlow:TextFlow = new TextFlow();
 textFlow = TextConverter.importToFlow(xml, TextConverter.TEXT_LAYOUT_FORMAT);
 textFlow.fontLookup = FontLookup.EMBEDDED_CFF;
 textFlow.renderingMode = RenderingMode.CFF;
 richText.textFlow = textFlow;
 ]]>
 </fx:Script>
<s:RichEditableText id="richText"
 width="100%"
 fontFamily="_BuchBold"
 fontLookup="embeddedCFF" renderingMode="cff" editable="false"/>

Arabric Font embed, and TLF use problem.

Hi all,
I meet a problem with embed the Arabric Font.
   [Embed(source="fonts/axtyoumn.TTF",fontFamily="AxtYoumna",embedAsCFF="true" ,unicodeRange="U+0000-U+1000")]
   public const AxtYoumna:Class;
   [Embed(source="fonts/AXTSIL__.TTF", fontFamily="AxtSImplifed",embedAsCFF="true",unicodeRange="U+0000-U+1000")]
   public const AxtSImplifed:Class;
   public function fonts()
     Font.registerFont(AxtYoumna);
     Font.registerFont(AxtSImplifed);
It succeed published into a .swf file. I load this file use
Font.enumerateFonts(false);
It shows the font I have embed, it seems embed succeed:
FontsName::: AxtYoumna ||||| FontsType::: embeddedCFF
FontsName::: AxtSImplifed ||||| FontsType::: embeddedCFF
Then I use AxtYoumna, AxtSImplifed for my textfield
   charFormat.fontFamily = ffont;
   charFormat.fontSize = fsize;
   charFormat.kerning = Kerning.ON;
   charFormat.fontWeight = fbold ? "bold" : "normal";
   //charFormat.fontWeight = "bold";
   charFormat.fontLookup = flash.text.engine.FontLookup.EMBEDDED_CFF;
   charFormat.renderingMode = flash.text.engine.RenderingMode.CFF;
   charFormat.cffHinting = flash.text.engine.CFFHinting.NONE;
The Text still not render correctly.
My builder is FLex 3, flash player 10, and Flex SDK 4.0.0.10485
But if I use the font Arial/Arabic Transparent/Traditional Arabric, it works.
I use AXtYOumna/AXtadvertising/AXtSImplified Light /AXtGihaneLightItalic /AXtYouSra/AXTTraditionalLight , it not works.
I can use these font in Photoshop CS4 middleeast version to show arabic succeefully.
Please help me.!

I suppose that "The Text still not render correctly. " means in particular that you don't the proper shaping (positional forms).
If that's the case, I think it is explained by the fact that AXtYOumna does not have the necessary OpenType layout tables. TLF/FTE need those table to select the proper positional shapes. Those tables are present in Arial/Arabic Transparent/Traditional Arabric.
Eric.

TextLayoutFormat.fontLookup =FontLookup.EMBEDDED_CFF breaks font?

Similar Messages

Maybe you are looking for