Embedding text formatted via CSS

I’m new to this CSS thing and it’s got me confused.

So this code works fine in terms of rendering and formatting text:

var ss:StyleSheet = new StyleSheet();

var H1:Object = new Object();
H1.fontSize = 24;
H1.fontFamily = "Impact";
H1.color = '#0000FF';

var para:Object = new Object();
para.fontFamily = "Palatino Linotype";
para.fontSize = 16;

var red:Object = new Object();
red.color = '#990000';
red.fontWeight = "bold";

ss.setStyle(".H1", H1);
ss.setStyle(".para", para);
ss.setStyle(".red", red);

var tf:TextField = new TextField();
tf.width = 450;
//tf.embedFonts = true;
tf.multiline = true;
tf.wordWrap = true;
tf.autoSize = TextFieldAutoSize.LEFT;
tf.styleSheet = ss;
tf.htmlText += "<span class='H1'>Casey At the Bat</span><br><br>";
tf.htmlText += "<span class='para'>The outlook wasn't brilliant for the Mudville nine that day</span><br>";
tf.htmlText += "<span class='para'>The score stood <span class='red'>four to two</span> with but an inning left to play</span>";
addChild(tf);

But the fonts are not embedded. If I want to reduce the textfield’s alpha or rotate it or some such operation, I need to embed the fonts.

If I uncomment [FONT=“Courier New”]tf.embedFonts = true;[/FONT] then the text disappears.

So what’s the next step? I’m familiar with various ways of embedding fonts – using fontName with a Library font, or embedding using the Flex SDK in FlashDevelop. But I don’t know how to approach either of those in the case of text formatted via CSS.