8 Replies Latest reply on Jan 19, 2011 7:44 PM by jmandawg

    Why don't embedded fonts work inside ItemRenderers?

    jmandawg Level 1

      I'm trying to use an embedded font on a spark label inside an item renderer for a list control and it doesn't work.  Works fine everywhere else.

        • 1. Re: Why don't embedded fonts work inside ItemRenderers?
          Gaurav J Adobe Employee

          How did you embed the font?

          Did you specify embedAsCFF:false ?

           

          -Gaurav

          http://www.gauravj.com/blog

          • 2. Re: Why don't embedded fonts work inside ItemRenderers?
            Kazaak549879

            You may need to register them manually first at app start. We had a similar problem with embedded fonts in charts.

            The code may look like below:

             

                    [Embed(source="/assets/fonts/Afonts.swf", fontName="Arial", fontStyle="normal")]
                    private var fontArial:Class;


                    protected function registerFonts():void {
                        Font.registerFont(fontArial);
                    }

             

            For more details see http://stackoverflow.com/questions/1709318/why-do-flex-charts-axis-values-labels-not-show- up-when-using-runtime-share-librar

             

            Thanks, Andrei.

             

            Message was edited by: Kazaak549879

            • 3. Re: Why don't embedded fonts work inside ItemRenderers?
              jmandawg Level 1

              My font is embedded in my Master.css file:

               

              @font-face{
                  src:url("/assets/fonts/TypeWriter.ttf");
                  fontFamily: TypeWriter;
                  embedAsCFF: true;
              }

               

              referenced in my main application.mxml:

               

              <fx:Style source="/assets/stylesheets/Master.css"/>

               

              The item renderer looks something like this (removed unecessary code):

               

              <?xml version="1.0" encoding="utf-8"?>
              <s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                              xmlns:s="library://ns.adobe.com/flex/spark"
                              xmlns:mx="library://ns.adobe.com/flex/mx"
                              autoDrawBackground="false" width="50%" depth="0" depth.hovered="1">
                 
                  <s:states>
                      <s:State name="normal" />
                      <s:State name="hovered" />
                      <s:State name="selected"  />
                  </s:states>

                  <s:HGroup width="100%" paddingLeft="15" paddingTop="5">
                      <mx:Image source="{MasterListBase(data).imgName}" width="32" height="32" mask="{clipMask}"/>
                      <s:VGroup horizontalAlign="center" verticalAlign="middle" width="100%" height="100%">
                          <s:Label id="lblDesc" fontFamily="Typewriter" color="0xFFFFFF" fontSize="14" text="HELLO WORLD!!" />
                      </s:VGroup>
                     
                  </s:HGroup>
                 
              </s:ItemRenderer>

               

              Using the "Font.registerFont" Did not help.

              • 4. Re: Why don't embedded fonts work inside ItemRenderers?
                Gaurav J Adobe Employee

                Does it work after you make the case match. i.e. use fontFamily="TypeWriter" - so it matches your css declaration.

                 

                -Gaurav

                http://www.gauravj.com/blog

                • 5. Re: Why don't embedded fonts work inside ItemRenderers?
                  Kazaak549879 Level 1

                  Looks like in SDK 4 the problem with embedded fonts was fixed, so no duplicating manual registering is required anymore.

                   

                  Thanks, Andrei.

                  • 6. Re: Why don't embedded fonts work inside ItemRenderers?
                    jmandawg Level 1

                    Gaurav J wrote:

                     

                    Does it work after you make the case match. i.e. use fontFamily="TypeWriter" - so it matches your css declaration.

                     

                    -Gaurav

                    http://www.gauravj.com/blog

                    No, it doesn't.

                    Do you want me to post the complete source code?

                    • 7. Re: Why don't embedded fonts work inside ItemRenderers?
                      Flex harUI Adobe Employee

                      Post the most reduced test case that fails, and how you know it is failing.

                      1 person found this helpful
                      • 8. Re: Why don't embedded fonts work inside ItemRenderers?
                        jmandawg Level 1

                        So i think i figured out what was going on.  Here is my simplified code:

                         

                        <?xml version="1.0" encoding="utf-8"?>
                        <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                                       xmlns:s="library://ns.adobe.com/flex/spark"
                                       xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:components="com.rtn.jccFlex.components.*" xmlns:local="*" xmlns:components1="com.ray.components.*">
                            <fx:Declarations>
                                <!-- Place non-visual elements (e.g., services, value objects) here -->
                            </fx:Declarations>
                            <fx:Style>
                                @namespace s "library://ns.adobe.com/flex/spark";
                                @namespace mx "library://ns.adobe.com/flex/mx";
                                @font-face {
                                    src: url("/assets/Typewriter.ttf");
                                    fontFamily: Typewriter;
                                    embedAsCFF: true;
                                }
                            </fx:Style>
                           
                            <mx:VBox width="100%" height="100%">
                                <s:Label fontFamily="Typewriter" text="MY FONT WORKS!!" fontSize="14" />
                                <s:Panel width="60%" height="100%" fontSize="18" fontWeight="bold">
                                    <s:Label fontFamily="Typewriter" text="MY FONT DOESNT WORKS!!" fontSize="14" />               
                                </s:Panel>       
                            </mx:VBox>
                           
                        </s:Application>

                         

                        It was looking for the bold version of the font since it inherited it from the parent panel. But the embed by default embeds the "normal" weight.

                         

                        In our project someone wrote a common panel component that sets the content of the panel using the "DefaultProperty" and we put our list in there.  So you don't really think about the container that the List and ItemRenderer sit inside, and it was very easy to overlook.

                         

                        This was very painful to figure out.

                         

                        Thanks for the help guys.