title: How to use embedded fonts with CSS in Spark skins of a Flex mobile project?
body: <p>Short example to describe the problem. Set up a usual Flex mobile project with the following files (and <a href="http://www.fontsquirrel.com/fonts/open-sans" rel="nofollow">OpenSans font</a>).</p>
  
  <p>Main.mxml</p>
  
  <pre><code>&lt;s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
             xmlns:s="library://ns.adobe.com/flex/spark"
             applicationDPI="160"&gt;
      &lt;s:layout&gt;&lt;s:VerticalLayout/&gt;&lt;/s:layout&gt;
  
      &lt;fx:Style source="style.css"/&gt;
  
      &lt;s:Label text="Static Label"/&gt;
      &lt;s:Button label="Static Button" skinClass="MyButtonSkin"/&gt;
  &lt;/s:Application&gt;
  </code></pre>
  
  <p>style.css</p>
  
  <pre><code>@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;
  }
  </code></pre>
  
  <p>MyButtonSkin.mxml</p>
  
  <pre><code>&lt;s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"&gt;
      &lt;!-- host component --&gt;
      &lt;fx:Metadata&gt;
          [HostComponent("spark.components.Button")]
      &lt;/fx:Metadata&gt;
  
      &lt;s:Label id="labelDisplay" /&gt;
  &lt;/s:Skin&gt;
  </code></pre>
  
  <p>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: <a href="http://img813.imageshack.us/img813/44/skinningtest.png" rel="nofollow">http://img813.imageshack.us/img813/44/skinningtest.png</a></p>
  
  <p>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.</p>
  
  <p>What do I miss to style the label in the button with the embedded font?</p>
  
  <hr>
  
  <p><strong>Solution</strong></p>
  
  <p>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.</p>
  
  <pre><code>/* 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;
  }
  </code></pre>
  
  <p>Use the defined classes as styleName in your MXML</p>
  
  <pre><code>&lt;s:Label text="Static Label" styleName="OpenSansEmbeddedBold"/&gt;
  </code></pre>