Can't apply embedded font to Spark Button in Flex 4

Question

I'm trying to embed a font so that I can rotate a Spark button component, but I'm not able to do it. The button always appears blank, no text.

The code looks like this:

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

    @font-face {
        fontFamily: verdana;
        src: url("VERDANA.TTF");
        embedAsCFF: true;
        fontWeight: normal;
    }

</fx:Style>


<s:Group>
    <s:layout>
        <s:HorizontalLayout />
    </s:layout>

    <s:Button id="back"
              includeInLayout="{data.thisLevel.getParent() != null}"
              label="Back"
              fontFamily="verdana"
              fontWeight="normal"
              height="100%"
              rotation="270" />
</s:Group>

My research has indicated you needed to play some games with fontWeight to get mx:Button to work, but that's supposedly fixed with Spark. (And messing around with fontWeight doesn't do anything.) When I turn the Button into a Label, it behaves the way I expect, so I'm apparently embedding the font properly -- the button just can't see it.

What am I doing wrong here?

Answer 1

You have done all right. Your code works by me wonderful. I have added the second button to let you see the effect.

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

    @font-face {
        fontFamily: verdana;
        src: url("assets/fonts/verdana.ttf");
        embedAsCFF: true;
        fontWeight: normal;
    }

    @font-face {
        fontFamily: snap;
        src: url("assets/fonts/snap.ttf");
        embedAsCFF: true;
        fontWeight: normal;
    }

</fx:Style>

<s:Group x="100" y="100">
    <s:layout>
        <s:HorizontalLayout />
    </s:layout>

    <s:Button id="back"
              includeInLayout="true"
              label="Back"
              fontFamily="verdana"
              fontWeight="normal"
              height="100%"
              rotation="270" />

    <s:Button id="back2"
              includeInLayout="true"
              label="Back"
              fontFamily="snap"
              fontWeight="normal"
              height="100%"
              rotation="270" />
</s:Group>
</s:Application>