Using embedded fonts with the Panel container in Flex

The following example shows how you can use an embedded font with the Flex Panel container so that a Panel container can be rotated or faded without the text “disappearing”. The trick here is to set the panel’s titleStyleName style to a custom style which sets the font family to the embedded font.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/28/using-embedded-fonts-with-the-panel-container-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        @font-face {
            src: local("Verdana");
            fontFamily: VerdanaEmbedded;
        }

        Panel {
            titleStyleName: panelTitleStyleName;
        }

        .panelTitleStyleName {
            fontFamily: VerdanaEmbedded;
            fontWeight: normal;
        }
    </mx:Style>

    <mx:Panel fontFamily="VerdanaEmbedded"
            title="Title"
            status="status"
            width="160"
            height="120"
            rotation="15">
        <mx:Text text="The quick brown fox jumped over the lazy dog."
                width="100%" />
        <mx:ControlBar>
            <mx:Label text="ControlBar label" />
        </mx:ControlBar>
    </mx:Panel>

</mx:Application>

View source is enabled in the following example.

4 thoughts on “Using embedded fonts with the Panel container in Flex

  1. 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?

  2. 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

  3. 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!

  4. 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

Comments are closed.