Mx components don't recognize embedded font

Question

I ran into this problem: while spark components render embedded font just fine, the mx components silently fail.
Here is a simple demo code where the first mx:LinkButton simply does not show up.
<?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="1024" minHeight="768">
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
@font-face {
src: url('/Library/Fonts/Microsoft/Goudy Old Style');
fontFamily: 'GoudyEmbedded';
.embedded {
fontFamily: 'GoudyEmbedded';
color: #FF0000;
fontSize:28;
.nonembedded {
fontFamily: 'Goudy Old Style';
color: #FF0000;
fontSize:28;
</fx:Style>
<mx:LinkButton x="50" y="50" styleName="embedded" label="Just a test - 1234567890" />
<mx:LinkButton x="50" y="150" styleName="nonembedded" label="Just a test - 1234567890" />
</s:Application>

Answer 1

Here are 4 instances of 'Accordion', where you can see how 'headerStyleName' and 'styleName' yield different results.
<?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="1024" minHeight="768">
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
@font-face {
src: url('/Library/Fonts/Microsoft/Goudy Old Style');
fontFamily: GoudyEmbedded;
.emb {
fontFamily: GoudyEmbedded;
color: #800000;
fontSize: 24;
textAlign: center;
textFieldClass: ClassReference("mx.core.UIFTETextField");
.nonemb {
fontFamily: 'Goudy Old Style';
color: #800000;
fontSize: 24;
textAlign: center;
</fx:Style>
<!-- 'headerStyleName' does render embedded font -->
<mx:Accordion id="acc1" x="10" y="10" width="240" headerStyleName="emb" >
<s:NavigatorContent label="The slanted dash '-'" >
<s:Label x="10" y="50" styleName="emb" text="Just a test - 12345" />
</s:NavigatorContent>
</mx:Accordion>
<!-- just 'styleName' - does NOT render embedded font -->
<mx:Accordion id="acc2" x="260" y="10" width="240" styleName="emb" >
<s:NavigatorContent label="The slanted dash '-'" >
<s:Label x="10" y="50" styleName="emb" text="Just a test - 12345" />
</s:NavigatorContent>
</mx:Accordion>
<!-- non embedded font works -->
<mx:Accordion id="acc3" x="510" y="10" width="240" headerStyleName="nonemb" >
<s:NavigatorContent label="The slanted dash '-'" >
<s:Label x="10" y="50" styleName="emb" text="Just a test - 12345" />
</s:NavigatorContent>
</mx:Accordion>
<!-- non embedded font is rendered but text alignment is ignored-->
<mx:Accordion id="acc4" x="760" y="10" width="240" styleName="nonemb" >
<s:NavigatorContent label="The slanted dash '-'" >
<s:Label x="10" y="50" styleName="emb" text="Just a test - 12345" />
</s:NavigatorContent>
</mx:Accordion>
</s:Application>