How to use embedded fonts with CSS in Spark skins of a Flex mobile project?

Question

Short example to describe the problem. Set up a usual Flex mobile project with the following files (and OpenSans font).

Main.mxml

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

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

    <s:Label text="Static Label"/>
    <s:Button label="Static Button" skinClass="MyButtonSkin"/>
</s:Application>

style.css

@namespace s "library://ns.adobe.com/flex/spark";

@font-face {
    src: url("fonts/opensans/OpenSans-Bold.ttf");
    fontFamily: OpenSansBoldEmbedded;
    embedAsCFF: true;
}

s|Label,
s|Button
{
    fontFamily: OpenSansBoldEmbedded;
    font-lookup: embeddedCFF;
}

MyButtonSkin.mxml

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">
    <!-- host component -->
    <fx:Metadata>
        [HostComponent("spark.components.Button")]
    </fx:Metadata>

    <s:Label id="labelDisplay" />
</s:Skin>

The result is that the simple label is styled with the embedded font, but the label in the button isn't. So it looks like this: http://img813.imageshack.us/img813/44/skinningtest.png

I've tried other CSS properties like color and font-size and it works for both. Only the embedded fonts won't work in Spark skins.

What do I miss to style the label in the button with the embedded font?

---

Solution

Use the attributes fontWeight and fontStyle at the import (@font-face) and on usage (.OpenSansEmbeddedBold). It's not enough to embed the bold font and use it.

/* Import the different font weights and styles */
@font-face {
        src: url("fonts/opensans/OpenSans-Regular.ttf");
        fontFamily: OpenSansEmbedded;
}

@font-face {
        src: url("fonts/opensans/OpenSans-Bold.ttf");
        fontFamily: OpenSansEmbedded;
        fontWeight: bold;
}

@font-face {
        src: url("fonts/opensans/OpenSans-Italic.ttf");
        fontFamily: OpenSansEmbedded;
        fontStyle: italic;
}

@font-face {
        src: url("fonts/opensans/OpenSans-BoldItalic.ttf");
        fontFamily: OpenSansEmbedded;
        fontWeight: bold;
        fontStyle: italic;
}

/* Register fonts as styleNames for further use */
.OpenSansEmbedded
{
        fontFamily: OpenSansEmbedded;
}

.OpenSansEmbeddedBold
{
        fontFamily: OpenSansEmbedded;
        fontWeight: bold;
}

.OpenSansEmbeddedItalic
{
        fontFamily: OpenSansEmbedded;
        fontStyle: italic;
}

.OpenSansEmbeddedBoldItalic
{
        fontFamily: OpenSansEmbedded;
        fontWeight: bold;
        fontStyle: italic;
}

Use the defined classes as styleName in your MXML

<s:Label text="Static Label" styleName="OpenSansEmbeddedBold"/>

Answer 1

I don't know exactly why, but try adding fontWeight: normal; in your css and this will help. I came to this conclusion after changing fontFamily to Verdana and seeing that button label was bold.

Answer 2

for the button you should use embedAsCFF: false

@namespace s "library://ns.adobe.com/flex/spark";

@font-face {
    src: url("fonts/opensans/OpenSans-Bold.ttf");
    fontFamily: OpenSansBoldEmbedded;
    embedAsCFF: true;
}

@font-face {
    src: url("fonts/opensans/OpenSans-Bold.ttf");
    fontFamily: OpenSansBoldEmbeddedForBtn;
    embedAsCFF: false;
}

s|Label
{
    fontFamily: OpenSansBoldEmbedded;
    font-lookup: embeddedCFF;
}

s|Button
{
    fontFamily: OpenSansBoldEmbeddedForBtn;
}