14 Replies Latest reply on Sep 29, 2009 10:03 AM by Peter deHaan

    Problems with embedded font on spark RichText control

    KenichiM Level 1
      I have an embedded font that appears correctly when used with Halo components, but when associated with the spark RichText component, it is not recognized.

      The embedded font is defined in css file, my css file

      @namespace s "library://ns.adobe.com/flex/spark";
      @namespace mx "library://ns.adobe.com/flex/halo";
        
      @font-face {
      src:url("assets/fonts.swf");
      fontFamily: "Helvetica Neue";
      }

      @font-face {
      src:url("assets/fonts.swf");
      fontFamily:"Helvetica Neue";
      fontWeight: bold;
      }

      global{
      color:#333333;
      fontFamily: "Helvetica Neue";
      fontSize:12px;
      }


      The embedded font it used in the following manner:

      <mx:Label styleName="panelTitle" text="Hello There"  width="263" x="21" y="11"/>

      <s:Group width="410" x="38" y="52" height="50">
      <s:RichText styleName="panelTitle" text="Hello There" fontFamily="Helvetica Neue"  width="263" x="21" y="11"/>
      </s:Group>

      The Label shows the embedded font correctly while the RichText control does not. It does not matter if the fontFamily is specified explicitly on the control or not.

      I created a bug SDK-22137, but since I'd need to get this working soon any help would be appreciated.
        • 1. Re: Problems with embedded font on spark RichText control
          CoreyRLucier Adobe Employee

          Not a bug.  The new Flex 4 components leverage the new Player 10 DefineFont4 embedded font format.

           

          Check out this post:

           

          http://blog.flexexamples.com/2008/10/15/embedding-fonts-in-flex-gumbo/

           

          I believe you just need to ensure cff: true is specified for your font face descriptor.

           

          Regards,

           

          Corey

          • 2. Re: Problems with embedded font on spark RichText control
            Peter deHaan Level 4

            Just a friendly reminder. Many of the examples on that site are fairly old and havent been updated to use the latest APIs. For example, "cff" has recently been renamed to "embedAsCFF". In fact, here's a better example:

            <?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/halo">
            
                <s:layout>
                    <s:VerticalLayout paddingLeft="20" paddingTop="20" />
                </s:layout>
            
                <fx:Style>
                    @namespace mx "library://ns.adobe.com/flex/halo";
                    @namespace s "library://ns.adobe.com/flex/spark";
                    /* DefineFont3 (embedAsCFF == false) */
                    @font-face {
                        src: url("assets/georgia.TTF");
                        fontFamily: embGeorgia;
                        fontWeight: normal;
                        embedAsCFF: false;
                    }
                    @font-face {
                        src: url("assets/georgiab.TTF");
                        fontFamily: embGeorgia;
                        fontWeight: bold;
                        embedAsCFF: false;
                    }
                    /* DefineFont4 (embedAsCFF == true) */
                    @font-face {
                        src: url("assets/georgia.TTF");
                        fontFamily: embGeorgiaCFF;
                        fontWeight: normal;
                        embedAsCFF: true;
                    }
                    @font-face {
                        src: url("assets/georgiab.TTF");
                        fontFamily: embGeorgiaCFF;
                        fontWeight: bold;
                        embedAsCFF: true;
                    }
                    mx|Label {
                        fontFamily: embGeorgia;
                    }
                    s|RichText {
                        fontFamily: embGeorgiaCFF;
                        fontLookup: embeddedCFF;
                    }
                </fx:Style>
            
                <mx:Label text="Halo Label" />
                <mx:Label text="Halo Label (bold)" fontWeight="bold" />
                <s:RichText text="Spark RichText" />
                <s:RichText text="Spark RichText (bold)" fontWeight="bold" />
            
            </s:Application>
            

             

            Also, depending on what you're trying to do, this may help you: http://blog.flexexamples.com/2009/06/14/using-a-cff-embedded-font-with-a-halo-label-contro l-in-flex-4/. Basically, you can set the textFieldClass style on certain Halo controls and have them use the mx.core.UITLFTextFieldClass (instead of the default mx.core.UITextFieldClass) so they can take advantage of the new CFF fonts.

            In fact, here's the same example as above, but with the single embedded font:

            <?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/halo">
                <s:layout>
                    <s:VerticalLayout paddingLeft="20" paddingTop="20" />
                </s:layout>
            
                <fx:Style>
                    @namespace mx "library://ns.adobe.com/flex/halo";
                    @namespace s "library://ns.adobe.com/flex/spark";
                    /* DefineFont4 (embedAsCFF == true) */
                    @font-face {
                        src: url("assets/georgia.TTF");
                        fontFamily: embGeorgiaCFF;
                        fontWeight: normal;
                        embedAsCFF: true;
                    }
                    @font-face {
                        src: url("assets/georgiab.TTF");
                        fontFamily: embGeorgiaCFF;
                        fontWeight: bold;
                        embedAsCFF: true;
                    }
                    mx|Label {
                        fontFamily: embGeorgiaCFF;
                        textFieldClass: ClassReference("mx.core.UITLFTextField");
                    }
                    s|RichText {
                        fontFamily: embGeorgiaCFF;
                        fontLookup: embeddedCFF;
                    }
                </fx:Style>
            
                <mx:Label text="Halo Label" />
                <mx:Label text="Halo Label (bold)" fontWeight="bold" />
                <s:RichText text="Spark RichText" />
                <s:RichText text="Spark RichText (bold)" fontWeight="bold" />
            
            </s:Application>
            

             

            Peter

            • 3. Re: Problems with embedded font on spark RichText control
              Peter deHaan Level 4

              Also, I should mention that I'm using the latest Nightly Flex 4 SDK build from http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4, and not the Flex 4 SDK that shipped w/ Flash Builder 4 beta (which was 4.0.0.7219, circa Wed May 13 2009).

               

              Depending on which SDK you're using, your mileage may vary. Peter always suggests using the latest Flex 4 nightly build available.

               

              Peter

              • 4. Re: Problems with embedded font on spark RichText control
                KenichiM Level 1

                I tried downloading the latest nightly build 4.0.0.8441, configured my Flex compiler properties in Flash Builder to point to this sdk, and when I do a clean build, I get the following error:

                 

                Description    Resource    Path    Location    Type
                An internal build error has occurred. Right-click for more information.    Unknown    Flex Problem

                 

                The error log reports this Java exception:

                 

                !ENTRY com.adobe.flexbuilder.project 4 43 2009-07-08 10:52:12.601 !MESSAGE Uncaught exception in compiler !STACK 0 java.lang.ClassCastException: flex2.tools.oem.LibraryCache      at com.adobe.flexbuilder.multisdk.compiler.internal.GumboConfiguration.applySharedLibraryCac he(GumboConfiguration.java:50)      at com.adobe.flexbuilder.multisdk.compiler.internal.ASBuilder.applySettings(ASBuilder.java:3 37)      at com.adobe.flexbuilder.multisdk.compiler.internal.ASApplicationBuilder.setup(ASApplication Builder.java:67)      at com.adobe.flexbuilder.multisdk.compiler.internal.ASItemBuilder.setup(ASItemBuilder.java:5 4)      at com.adobe.flexbuilder.project.compiler.BuilderFactory.createBuilder(BuilderFactory.java:8 0)      at com.adobe.flexbuilder.project.compiler.BuilderFactory.createBuilder(BuilderFactory.java:5 9)      at com.adobe.flexbuilder.project.compiler.BuilderManager.getBuilder(BuilderManager.java:190)      at com.adobe.flexbuilder.project.compiler.internal.FlexIncrementalBuilder.preBuild(FlexIncre mentalBuilder.java:394)      at com.adobe.flexbuilder.project.compiler.internal.FlexProjectBuilder.buildItem(FlexProjectB uilder.java:421)      at com.adobe.flexbuilder.project.compiler.internal.FlexProjectBuilder.build(FlexProjectBuild er.java:264)      at com.adobe.flexbuilder.project.compiler.internal.FlexIncrementalBuilder.build(FlexIncremen talBuilder.java:131)      at org.eclipse.core.internal.events.BuildManager$2.run(BuildManager.java:633)      at org.eclipse.core.runtime.SafeRunner.run(SafeRunner.java:37)      at org.eclipse.core.internal.events.BuildManager.basicBuild(BuildManager.java:170)      at org.eclipse.core.internal.events.BuildManager.basicBuild(BuildManager.java:201)      at org.eclipse.core.internal.events.BuildManager$1.run(BuildManager.java:253)      at org.eclipse.core.runtime.SafeRunner.run(SafeRunner.java:37)      at org.eclipse.core.internal.events.BuildManager.basicBuild(BuildManager.java:256)      at org.eclipse.core.internal.events.BuildManager.basicBuildLoop(BuildManager.java:309)      at org.eclipse.core.internal.events.BuildManager.build(BuildManager.java:341)      at org.eclipse.core.internal.resources.Workspace.build(Workspace.java:330)      at org.eclipse.ui.actions.GlobalBuildAction$1.run(GlobalBuildAction.java:182)      at org.eclipse.core.internal.jobs.Worker.run(Worker.java:55)

                 

                Any suggestions?

                • 5. Re: Problems with embedded font on spark RichText control
                  Peter deHaan Level 4

                  Weird, I've never seen that.

                  Did you try restarting Flash Builder 4 after installing the new SDK?

                  • 6. Re: Problems with embedded font on spark RichText control
                    CoreyRLucier Adobe Employee

                    For what it's worth you don't need to grab the latest SDK in this case to address your RichText issue - but a good bug none the less and something we need to track down. 

                    • 7. Re: Problems with embedded font on spark RichText control
                      deepa subramaniam (adobe) Level 2

                      Hello -

                       

                      There is a known problem with the Flash Builder Beta build when switching to use a nightly 4.0 SDK - you will get an internal build error citing a ClassCast Exception. This is a Flash Builder issue that was fixed post-Beta. The problem with using nightly SDK builds in the Beta comes up only when you use more than one version of the Flex 4 SDK (i.e. a nightly build and the one included with the FB Beta). You will get an internal compiler error.

                       

                      To resolve this issue, you could switch all your projects to use the same version of the Flex 4 SDK (or Flex 3 is ok), and then restart Flash Builder to get rid of the build error _OR_ create a new workspace (and ensure you're using only one version of the 4.0 SDK in that workspace).

                       

                      Please reply back to this thread if this does not work.

                       

                      Cheers,

                      Deepa Subramaniam

                      Flex SDK Engineer

                      • 8. Re: Problems with embedded font on spark RichText control
                        KenichiM Level 1

                        That work. Thanks.

                        Had another issue associated with the nightly.  Pardon my ignorance, but when I compiled against the open source sdk nighly build, it complains it can't find the following classes mx.rpc.AbstractOperation, mx.logging.LogEvent, mx.core.IMXMLObject.  Are these only available from the Adobe SDK and not the open source sdk?

                        • 9. Re: Problems with embedded font on spark RichText control
                          Gus Leo Level 1

                          Great......I have done with internal build error,

                           

                          But now the problems is "C:\Program Files\Adobe\Flash Builder Plug-in Beta\sdks\flex_sdk_4.0.0.6898\frameworks/libs/netmon.swc'"

                           

                          I'm download two SDK but still have a same error, I'm manualy copying netmonscw to other SDK and restarting the flash builder. But have same problems,

                           

                           

                          Any idea to solve this issue???

                           

                           

                          Regards,

                           

                           

                          Gus Leo

                          • 10. Re: Problems with embedded font on spark RichText control
                            Ram Krishnaiyer (Adobe) Adobe Employee

                            Hi

                            This is a known issue with the previous beta build and should be resolved in the next version.

                             

                            If you copy netmon.swc manually from the beta SDK to the SDK that you have downloaded, does it not work?

                             

                            Ram

                            • 11. Re: Problems with embedded font on spark RichText control
                              Gus Leo Level 1

                              doesn't work sir...

                              BTW how to makes the embeding font work well, I'm follow all the response on this forum and from other website too. But still doesn't embedding font, have u any solution??

                               

                              When I'm create on Flex 4 and using MX tag, its work, but when use FX tag and Spark will have same error( doesn't load true font I'm embedded)

                               

                              Any Idea Sir??

                              • 12. Re: Problems with embedded font on spark RichText control
                                Peter deHaan Level 4

                                @Gus Leo,

                                 

                                Can you post a simple MXML case where the font embedding isnt working for you?

                                Also, which build of the Flex SDK are you using? (try something like <mx:Label text="{mx_internal::VERSION}" /> and let me know what build it says).

                                And what error(s) are you seeing?

                                 

                                Thanks,

                                Peter

                                • 13. Re: Problems with embedded font on spark RichText control
                                  Gus Leo Level 1

                                  Hi Peter,

                                   

                                  My Flex SDK Version is 4.0.0.7219. I'm include my project into this message..

                                  Please help me, because I'm going stack with this

                                   

                                  Thanx you for your response

                                   

                                  Thanx,

                                   

                                   

                                  Gus Leo

                                  • 14. Re: Problems with embedded font on spark RichText control
                                    Peter deHaan Level 4

                                    Gus Leo,

                                     

                                    It won't let me open that archive, but I was able to get font embedding working in build 4.0.0.10526 -- http://blog.flexexamples.com/2008/10/15/embedding-fonts-in-flex-gumbo/comment-page-1/#comm ent-5875

                                     

                                    Peter