9 Replies Latest reply on Mar 31, 2008 2:51 PM by TessandraFae

Embedding fonts

I have a problem embedding fonts into my code.
I tried to embed a font using the portion of code below:

<mx:Style>

@font-face{
src:url("../font/BRLNSDB.TTF");
font-family:"Berlin Sans FB Demi";
font-weight:bold;
}

.labelStyle{
embedFonts:true;
font-family:"Berlin Sans FB Demi";
font-weight:normal;
font-size:13;
}

</mx:Style>

Then I tried to use the font in a Label:
<mx:Label x="10" y="386" text="&lt;none&gt;" styleName="labelStyle" id="labUsernameRemoto"/>

Now the problem: if I use the application in a computer that doesn't have the font installed in c:\windows\fonts, I see all the Label written in Times New Roman (or something similar). Why?
• 1. Re: Embedding fonts
Dave,

You can try using the Embed directive. Look at the Embedded Fonts chapter in the Flex Developers Guide for some examples.

• 2. Re: Embedding fonts
Dave 81,

You've only embedded the "bold" font weight for the Berlin Sans FB Demi font family. Your labelStyle style is trying to use the normal font weight.
Try embedding the normal font as well by adding the attached code to your <mx:Style /> block.

Peter
• 3. Embedding fonts
I tried also changing font-weight to bold with no success.
The only thing that I can do is using the method setStyle when I initialize the application, but I can't see the font in the &amp;quot;design&amp;quot; view
• 4. Re: Embedding fonts
The font file that you are using, &quot;BRLNSDB.TTF&quot; is Berlin Sans FB Demi Bold and therefore can only be used in bold fonts. This should work:

mx:Style&gt;

@font-face{
src:url(&quot;../font/BRLNSDB.TTF&quot;);
font-family:&quot;Berlin Sans FB Demi&quot;;
font-weight:bold;
}

.labelStyle{
embedFonts:true;
font-family:&quot;Berlin Sans FB Demi&quot;;
font-weight:bold;
font-size:13;
}

&lt;/mx:Style&gt;

&lt;mx:Label x=&quot;10&quot; y=&quot;386&quot; text=&quot;none&quot; styleName=&quot;labelStyle&quot; id=&quot;labUsernameRemoto&quot;/&gt;

If you want to use the normal version of Berlin Sans FB, you'll need to embed the Brlnsr.ttf:

@font-face{
src:url(&quot;../font/BRLNSR.TTF&quot;);
font-family:&quot;Berlin Sans FB&quot;;
font-weight:normal;
}

.labelStyle2 {
embedFonts:true;
font-family:&quot;Berlin Sans FB&quot;;
font-size:13;
}

Joan
• 5. Re: Embedding fonts
In my case it doesn't work...:(
• 6. Re: Embedding fonts
Hi Dave,

Do you get a compilation error or does the app display some other font?

Thanks,
Gaurav
• 7. Re: Embedding fonts
The application displays text in Times New Roman
• 8. Re: Embedding fonts
Hi Dave,

You need to make sure that if you are embedding font weight bold in the @font-face, then you define font-weight as bold in the style name declaration.

If you are embedding font normal in the @font-face, then you need not define font-weight in the style declaration.

Also you can add rotation to the <mx:Label> to make sure that it is displaying embedded fonts.

Please take a look at the code snippet below. And if you don't see the text rotating let me know.

Thanks,
Gaurav Jain
Flex SDK Team