textLayoutFormat.fontLookup =FontLookup.EMBEDDED_CFF breaks font?

Report · May 10, 2010

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

Report · May 10, 2010

Because you are embedding a bold font I believe you also need to specify fontWeight="bold" in the Embed metadata.

Richard

Report · May 10, 2010

I was hopeful that this might be it, but if I add your suggested metadata tag, I get:

exception during transcoding: Font for alias 'Myriad Pro' with bold weight was not found at: file:/src/assets/MyriadPro-Bold.otf

Report · May 10, 2010

I should also add that I had no problems making embedded text bold using the old Flash text (classic text) but with the TLF, as soon as I add textLayoutFormat.fontLookup = flash.text.engine.FontLookup.EMBEDDED_CFF; the bold disappears. Not also that using Font.enumerateFonts(), the system assures me that the font is embedded. So to me this smells a lot like a bug in the Text Layout Framework

Report · May 10, 2010

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>

Report · May 11, 2010

Hi again, I really appreciate your helpful email and a few of the "tricks" I learned from it. I especially like trace((this.getChildAt(0) as TextLine).dump()); although I'm not entirely sure what the output is. Is there a name for this XML schema so I can read up on it?

Also, what's a bit confusing is that in the Embed metadata, it's called a fontName, but in the flash code it's called a fontFamily, eg;

[Embed(mimeType="application/x-font", exportSymbol="MyriadProBold", embedAsCFF="true", fontWeight="bold", source="../../fonts/MyriadPro-Bold.otf", fontName="myMyriadPro")]

vs.

            textFlow.fontLookup = FontLookup.EMBEDDED_CFF;
            textFlow.fontFamily = "myMyriadPro";
            textFlow.fontWeight = FontWeight.BOLD;

What's up with that?!?

Anyhow, the bottom line is that it still does work for me in Flex 4.5. And when I switch to Flex 4.0 it will not compile

transcoding parameter 'embedAsCFF' is not supported by 'flex2.compiler.media.FontTranscoder'

Your continued feedback is very much appreciated!

Report · May 11, 2010

Correction, when I took your sample code and copied it line for line into a seperate standalone app, it worked with Flex 4.5. There must be something about the compiler settings in my other project that is breaking it.

Thanks again for your help!

PJ.

Report · May 11, 2010

I found the problem. I had this setting in my project, which is sometimes neccessary when embedding with "Classic" text

-managers=flash.fonts.AFEFontManager