Embedding ttf file using CSS in flex 4 and flex 4.5

Earlier in flex3 and flex3.5 embedding fonts using  ttf files could be done straight from CSS files, but this was not working for me when I moved to flex 4.  I found a solution in livedocs.

Embedding TTF file in CSS for flex 3 and flex 3.5
/* CSS file */
@font-face
{
     font-family: myFont;
     src: url("/fonts/myFont.ttf");
}

.myStyle
{
    font-family: myFont;
}
Embedding TTF file in CSS for flex 4 and flex 4.5
Step-1:


       [Embed(source='/fonts/myFont.ttf',fontName='myFont',mimeType='application/x-font',embedAsCFF='true')]
       private var font1:Class; //This is only used to compile the code

Step-2:

/* CSS file */
.myStyle
{
    font-family: myFont;
}
About these ads

Posted on June 22, 2011, in Flex and tagged , , , , , , . Bookmark the permalink. 3 Comments.

  1. Hi Srinivas!

    In Flex4 & 4.5 you can also embed fonts stright from the css file as in Flex3… I don’t know why you cant… In fact, the problem usually comes when you use mx texfields in a Flex 4 & 4.5 projects. In these cases you must embed your font twice (one for spark and the other one for mx components) and you MUST explicitly set the property embedAsCFF to false for this last.

    For Flex3 you can also try Antialiaser, a new tool for designers that helps you to embed & fine-tune your fonts for Flex and AIR applications.

    http://www.cycle-it.com/antialiaser/

    • Srinivas Chekuri

      Hi Pixelinmind,
      I had problem embedding ttf file using CSS even using property embedAsCFF and this is the solution that worked, anyways I will change the wordings on the post. Thanks for the heads up.

      -Srini.

  2. awesome – thanks, exactly what I needed

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 32 other followers

%d bloggers like this: