5 Replies Latest reply on Jun 30, 2010 9:17 AM by Flex harUI

    CSS & AS3 Font Embedding

    pkrekelberg Level 1

      We have an application which is built like so:

       

      Framework SWC

      Application SWC

      - Sub-application for web

      - Sub-application for desktop

      - Unit test runner

      - etc.

       

      The applications all share a look and feel including fonts. This was easy to achieve with Flex 3 using the trick with placing a defaults.css file at the root of the Flex Library Project. This would apply the CSS in the defaults.css file as the default theme, and font embedding calls in the CSS could refer to font files in the Flex Library Project. It worked great because we are also using a Sprite-based custom label class which embeds its font using AS3.

       

      Now, the CSS font embed lines only work if we also place the fonts in the Sub-application. This means we have to have the fonts copied in every sub-application for the CSS as well as in the SWC for the AS3 embedded label class.

       

      Is there a better way to achieve this in Flex 4, if we want embedded fonts in AS3 as well as Spark components?

       

      Thanks!

      Patrick

        • 1. Re: CSS & AS3 Font Embedding
          Flex harUI Adobe Employee

          I don't understand the configuration.  There is a font embedded in an AS

          file that gets linked into the main app?  How does your custom component

          find out which font to use?

          • 2. Re: CSS & AS3 Font Embedding
            pkrekelberg Level 1

            There is a class which renders a simple Label (just like the Spark label) but it uses FTETextField as it is Sprite-based. We also want a Sprite-based editable text field so I'll have to write something similar to the Spark RichEditableText component myself.

             

            The simple Label using FTETextField uses Actionscript to embed the font as I thought this was the simplest method. The font is assigned using a TextFormat instance.

             

            This simple Label gets pulled into the main app as the SWC "is" the application. The sub-application[s] just use factory implementations to get it to appear and function either as a web or desktop application.

             

            Does this help?

            • 3. Re: CSS & AS3 Font Embedding
              Flex harUI Adobe Employee

              I'm not sure exactly why you can't use Label and RichEditableText.  You

              might want to revisit that decision.

               

              If the font is embedded in the main app SWF and is picked up by TextFormat,

              then the most common possibility is that somehow other SWFs are being used

              to factory the FTETextField.  Maybe since styles are now per-SWF that's what

              is going on.

              • 4. Re: CSS & AS3 Font Embedding
                pkrekelberg Level 1

                Flex harUI wrote:

                 

                I'm not sure exactly why you can't use Label and RichEditableText.  You

                might want to revisit that decision.

                 

                If the font is embedded in the main app SWF and is picked up by TextFormat,

                then the most common possibility is that somehow other SWFs are being used

                to factory the FTETextField.  Maybe since styles are now per-SWF that's what

                is going on.

                I cannot use Label or RichEditableText because that particular text is being displayed in a completely Sprite-based view. We feel for that portion of the view that it is worth giving up the advantages of UIComponent to get something lighter weight.

                 

                The font for the Sprite-based text is embedded in the class for that text field. The font for the UIComponent-based text is embedded using CSS. Is there a way to use a single compiled SWF for both? Would the SWF just be a single class embedding the fonts? That way we could pull it in at runtime. Would that work for the TextFormat as well?

                 

                Thanks,

                Patrick

                • 5. Re: CSS & AS3 Font Embedding
                  Flex harUI Adobe Employee

                  If you already have Flex in your app, I'm not sure how much you are saving

                  by also having a Sprite-based equivalent in the same app.

                   

                  The simplest Flex Font module looks something like this:

                   

                  package

                  {

                      import mx.modules.ModuleBase;

                       

                      public class VerdanaFontModule extends ModuleBase

                      {

                          public function VerdanaFontModule ()

                          {

                          }

                   

                          [Embed(source='assets/Verdana.ttf',

                                      fontName='Verdana',

                                         mimeType='application/x-font')]

                          public static var VerdanaNormal:Class;

                     }

                  }

                   

                  You would use the module factory.create() to generate the TextField.  You

                  could also registerFont the font, but then the module won't unload.