3 Replies Latest reply on Jan 31, 2011 10:40 PM by aktell2007

    Embedded fonts in HTML control




      I'm trying to make an AIR 2.5 application using the HTML component as part of the UI. I know that web fonts are available in this version of the sdk. But , what i'm trying to make is to use a swf embedded font in the rendered HTML. I have a swf file containing my embedded font (generated with Fontswffer) and embedded it in my application so that I can use it with all my components. My question is how to use it in the HTML component.


      I tried to reference it in my html file loaded in the component with @font-face directive by with no success !



      @font-face {
          font-family: "MyFont";
          src: local("MyFont");


      Though, the font is available at runtime (Fonts.enumerateFonts())

      MyFont [boldItalic] [embeddedCFF]
      MyFont [regular] [embeddedCFF]
      MyFont [bold] [embeddedCFF]
      MyFont [italic] [embeddedCFF]


      Is it possible to use it with the HTML component ?


      Thanks in advance

        • 1. Re: Embedded fonts in HTML control
          Flex harUI Adobe Employee

          I don't think that is possible.

          • 2. Re: Embedded fonts in HTML control
            Abhrodip Paul-cXMMf1

            I dont think the way you are tring will work.


            But, if you can get the component from mx:HTML, and then add the style in the component itself, might work


            Some thing like below


            <mx:HTML id="html" />

            var obj:Object = html.htmlLoader.window.document.getElementById(<htmlComponentID>); // htmlComponentID can be found using the firebug.

            // then set the style upon the "obj"

            // do the above styling while renderer event gets fired on html.


            This is just an idea. Do not know if this will work.

            • 3. Re: Embedded fonts in HTML control
              aktell2007 Level 1


              I usually use this in small and large AIR Apps.


              1. Create a .swf file with any font and Embed the FONT – So much easier this way !


                              @font-face {
                             src: url("assets/fonts/VerdanaFontN.swf");
                             fontFamily: Verdana;
                             fontWeight: normal;
                             fontStyle: normal;
                        global {
                             fontFamily: Verdana;
                             fontSize: 12;
                             font-Sharpness: 100;
                             font-GridFit-Type: pixel;

              Then use your HTML component:

                               <mx:WindowedApplication OR Module !!!
                             private function htmlTextIntro():void {
                                  htmlIntro.htmlLoader.loadString("<html><body><p><font color='#999999' font-size='11' font-weight='normal' font-family='Verdana'>TEXT !</font></p></body></html>");

              There are other ways as well IF you need more/others let me kmow I just have to find them in my DB's, ! regards aktell