Using embedded fonts with the Panel container in Flex

4 Responses to Using embedded fonts with the Panel container in Flex

1. Benjamin says:

   August 25, 2008 at 2:51 am

   I had the problem that all of a sudden in my panel title single chars disappeared. As I had seen similar things with flash I suspected an embedding problem and it seems I am right. With your tutorial I got it properly displayed again. So thanks for that.
   Some problem unfortunately remains. I want to use a bold verdana but when I use font-weight: bold it just looks awful. I tried to embed the bold verdana version itself but can´t figure out the right name… i.e. ‘src:local(“Verdana Bold”);’ doesn´t work.

   Any Ideas?

   Reply
2. peterd says:

   August 25, 2008 at 8:27 am

   Benjamin,

   I wasn’t able to figure out the local font name for Verdana Bold, but the following example shows how you can embed the file from your C:\WINDOWS\Fonts\ directory (which may need tweaking based on your OS/install — or you can just copy the verdanab.TTF font into your Flex project):

   <?xml version="1.0" encoding="utf-8"?>
   <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
           layout="horizontal">
   
       <mx:Style>
           @font-face {
               src: url("C:/WINDOWS/Fonts/verdanab.TTF");
               fontFamily: VerdanaBoldEmbedded;
               fontWeight: bold;
           }
   
           @font-face {
               src: local("Verdana");
               fontFamily: VerdanaNormalEmbedded;
           }
   
           @font-face {
               src: local("Verdana");
               fontFamily: VerdanaNormalBoldEmbedded;
               fontWeight: bold;
           }
   
           .verdanaBoldBoldTitle {
               fontFamily: VerdanaBoldEmbedded;
               fontWeight: bold;
           }
   
           .verdanaNormalTitle {
               fontFamily: VerdanaNormalEmbedded;
               fontWeight: normal;
           }
   
           .verdanaNormalBoldTitle {
               fontFamily: VerdanaNormalBoldEmbedded;
               fontWeight: bold;
           }
       </mx:Style>
   
       <mx:Panel title="Verdana Bold Test"
               titleStyleName="verdanaBoldBoldTitle"
               width="33%"
               height="100">
           <mx:Label text="Verdana Bold bold" />
       </mx:Panel>
   
       <mx:Panel title="Verdana Normal Test"
               titleStyleName="verdanaNormalTitle"
               width="33%"
               height="100">
           <mx:Label text="Verdana normal" />
       </mx:Panel>
   
       <mx:Panel title="Verdana Normal Test (w/ bold)"
               titleStyleName="verdanaNormalBoldTitle"
               width="33%"
               height="100">
           <mx:Label text="Verdana bold" />
       </mx:Panel>
   
   </mx:Application>
   

   Peter

   Reply
3. Alan Moore says:

   April 7, 2010 at 11:53 am

   Thanks so much for this. I had embedded a font as a SWF file and the only place it wasn’t working was the titles of the panels in my app. The hardest thing about Flex has been the custom CSS – terribly confusing after 5 years of CSS for HTML!

   Reply
4. Biran says:

   November 11, 2011 at 3:52 am

   helpful article, now embedded fonts can display in my photoshop panel, but having problem when i tried to assign that font in photoshop text layer.

   Please suggest so that my embedded font will also render in photoshop active text layer.

   Biran

   Reply