Embedding fonts in css

Question

The following file uses two approaches to style text: CSS and TextFormat They result in different results that are very similar, but different. I suspect that I am not embedding fonts properly when using CSS. Am I correct and, if so, what should I be doing?
Main file:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  creationComplete="init()">
    <mx:Style source="styleSheet.css" />
    <mx:Script>
        <![CDATA[
import flash.text.*;
import mx.core.UIComponent;
private var textFormats:TextFormats=new TextFormats;
private function init():void{
    var spellingExplanation:TextField=new TextField
    spellingExplanation.text="Characters"
    spellingExplanation.setTextFormat(textFormats.buttonStyle1);
       spellingExplanation.autoSize=TextFieldAutoSize.LEFT
       spellingExplanation.embedFonts=true;
    var container:UIComponent = new UIComponent()
    container.addChild(spellingExplanation)   
    textContainer.addChild(container)
        ]]>
    </mx:Script>
    <mx:VBox id="textContainer">
        <mx:Label    text="Characters" styleName="buttonStyle1"/>       
    </mx:VBox>
</mx:Application>
styleSheet.css
@font-face {
    fontFamily: FranklinGothicMedium;
    src: url("framd.ttf");
.buttonStyle1 {
   color: #000000;
   fontSize: 14;
   fontFamily: FranklinGothicMedium;
TextFormats.as
package{
    import flash.text.TextFormat;
    public class TextFormats{    
    [Embed(source='framd.ttf', fontName="FranklinGothicMedium", mimeType="application/x-font-truetype")]
        public static const FranklinGothicMedium:String;
        private var _buttonStyle1:TextFormat;
        public function TextFormats(){
            buttonStyle1 = new TextFormat();
            buttonStyle1.color = 0x000000;
            buttonStyle1.font = "FranklinGothicMedium"//"Franklin Gothic Medium";
            buttonStyle1.size = 14;
        public function get buttonStyle1():TextFormat {
            return _buttonStyle1;
        public function set buttonStyle1(value:TextFormat):void {
            _buttonStyle1=value;

Answer 1

I've attached a file to show the differences. The top image shows the result of the css and the bottom image the result of using the TextFormat. The differences that become clear when the text is examined in Photoshop.