Flex - Flash Builder Design View not showing embedded fonts correctly

Question

Tools: Air 2, Flex SDK 4.1, Flash Builder, Halo component set (NO Spark being used at all)

Fonts work perfectly when running the appliction, but not in design view. This effectively makes design view WORTHLESS because it's impossible to properly position components or labels without knowing what the true size is (it changes depending on font...)

...

CSS included in root component like so:

<fx:Style source="style.css"/>

CSS file:

/* CSS file */
@namespace mx "library://ns.adobe.com/flex/mx";

global {
    font-family:Segoe;
    font-size:14;
    color:#FFFFFF;
}

mx|Application, mx|VBox, mx|HBox, mx|Canvas {
    font-family:Segoe;
    background-color:#660000;
    border-color:#222277;
    color:#FFFFFF;
}

mx|Button {
    font-family:Segoe;
    fill-colors:#660000, #660000, #660000, #660000;
    color:#FFFFFF;
}
...

Interestingly (or buggily?), when I try pasting the style tag into a subcomponent (lower than the top level container), I get a bunch of warnings in the subcomponent editor view stating that CSS type selectors are not supported in.. (all the components in the style sheet).
Yet, they do work when the application is executed. Huh?

This is how I'm embedding the fonts in the root level container:

 [Embed(source="/assets/segoepr.ttf", fontName="Segoe", mimeType="application/x-font-truetype", embedAsCFF='false')]
 public static const font:Class;

 [Embed(source="/assets/segoeprb.ttf", fontName="Segoe", mimeType="application/x-font-truetype", fontWeight="bold", embedAsCFF='false')]
 public static const font2:Class;

So, is there a way to get embedded fonts to work in design view or what?

Answer 1

I dont know if this helps but it is worth a shot. You don´t need to embed the fonts with the Embed Meta tag if you are using css. Try removing the font class embedding and add the embedding in the css file. This may work better with the design view in Flex.

// using system font
@font-face {
    src: local("Myriad Web Pro");
    fontFamily: myFontFamily;
    advancedAntiAliasing: true;
}

// using url to font file
@font-face {
    src: url("../assets/MyriadWebPro.ttf");
    fontFamily: myFontFamily;
    advancedAntiAliasing: true;
}

---

Try this code in design view:

<?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">

    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";

        @font-face {
            src: url("Arial Bold.ttf");
            fontFamily: "Arial Bold";
            embedAsCff: true;
        }


        s|Application
        {
            color: #000000;
            fontFamily: "Arial Bold";
            font-size: 48;
        }

    </fx:Style>

    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <s:Label text="This is the first label" width="488"  x="43" y="39" height="54"/>
    <s:Label text="This is the second label" width="488"  x="45" y="129" height="54" rotation="-4"/>
    <s:Label text="This is the third label" width="488"  x="43" y="208" height="54"/>

</s:Application>

Answer 2

It seems that the font Verdana is expected for Label and Text areas by default and if we do not embed it, the design view does not take any other embedded fonts in consideration.

Please embed the Verdana font and you should be able to see the labels and text areas in design view.

@font-face {
    src: local("Verdana");
    font-family: verdana;
    font-weight: normal;
}

Hope this helps.