20 Replies Latest reply on Apr 7, 2011 8:06 AM by Scottae031

    Why can I not use an embedded font?

    Scottae031 Level 1

      I am trying to get the simplest example to work and it flat out does not work.  I've been looking all over for a basic example of it working.  I've seen many, yet none work for me.  Something as simple as this:  http://blog.flexexamples.com/2008/10/15/embedding-fonts-in-flex-gumbo/ will not work for me.  I copied and pasted the example and substituted my own font and it does not work.

        • 1. Re: Why can I not use an embedded font?
          sekhar7650 Level 1

          hi Scottae

           

                                     copy and paste the code

           

          <?xml version="1.0" encoding="utf-8"?>
          <s:Application name="Spark_DefineFont4_cff_test"
                         xmlns:fx="http://ns.adobe.com/mxml/2009"
                         xmlns:s="library://ns.adobe.com/flex/spark"
                         xmlns:mx="library://ns.adobe.com/flex/halo"
                         creationComplete="init();">
              <s:layout>
                  <s:BasicLayout />
              </s:layout>
             
              <fx:Style>
                  @namespace s "library://ns.adobe.com/flex/spark";
                  @namespace mx "library://ns.adobe.com/flex/halo";
                 
                 
                 
                  s|RichEditableText {
                      font-family: vardana;
                      fontSize: 23;
                      font-weight:bold;
                     
                     
                  }
              </fx:Style>
             
              <s:RichEditableText id="textView"  backgroundColor="#CCFF33"
                                  text=" My Name Is Sekhar"
                                  width="430"
                                  horizontalCenter="0"
                                  verticalCenter="11"  height="135" />
             
          </s:Application>

           

           

          regards

          Sekhar

          • 2. Re: Why can I not use an embedded font?
            Scottae031 Level 1

            I appreciate the help, but your example does not embed any font at all.  It's just trying to use a system font.  That works fine for a font that all users have, but I am using a strange font that no one will have so I need to embed it into the swf file.

            • 3. Re: Why can I not use an embedded font?
              Scottae031 Level 1

              So I had a co-worker try to see if he could get the font embedding to work.  He is able to.  So he sent me his example so I could see what I was doing wrong.  When I run his example, it does not work and the fonts are not embedded.  What is going on here?

              • 4. Re: Why can I not use an embedded font?
                Peter deHaan Level 4

                @Scottae031,

                 

                Can you post a simple example here of the code you're trying to use and I can take a look.

                It's possible that the code from flexexamples.com is horribly out of date and some APIs may need to be updated. But I may be able to give you some better advice if I can see what font you're trying to embed and your syntax.

                 

                Thanks,

                Peter

                • 5. Re: Why can I not use an embedded font?
                  Scottae031 Level 1

                  Thank you Peter.  Below is the application mxml code which my co-worker is able to use and make work.  Yet when I run this project, it does not.

                   

                   

                  <?xml version="1.0" encoding="utf-8"?>
                  <s:Application name="Spark_DefineFont4_cff_test"
                          xmlns:fx="http://ns.adobe.com/mxml/2009"
                          xmlns:s="library://ns.adobe.com/flex/spark"
                          xmlns:mx="library://ns.adobe.com/flex/halo"
                          creationComplete="init();">
                  
                      <s:layout>
                          <s:BasicLayout />
                      </s:layout>
                  
                      <fx:Style>
                          @namespace s "library://ns.adobe.com/flex/spark";
                          @namespace mx "library://ns.adobe.com/flex/halo";
                  
                          @font-face {
                              src: url("assets/hooge.ttf");
                              fontFamily: "ACaslonProRegularEmbedded";
                              embedAsCFF: true;
                          }
                  
                          s|RichEditableText {
                              fontFamily: ACaslonProRegularEmbedded;
                              fontLookup: embeddedCFF;
                              fontSize: 34;
                          }
                      </fx:Style>
                  
                      <s:RichEditableText id="textView"
                              text="The quick brown fox jumped over the lazy dog. 01234567890"
                              width="400"
                              horizontalCenter="0"
                              verticalCenter="0" />
                  
                  </s:Application>
                  
                  • 6. Re: Why can I not use an embedded font?
                    Scottae031 Level 1

                    I have another co-worker who is also having the same trouble that I am.  It seems very odd that two of us fail yet one succeeds with the exact same code.

                    • 7. Re: Why can I not use an embedded font?
                      Peter deHaan Level 4

                      Sorry, i'm a bit confused.

                      Are you saying that when you run your co-workers app, that the embedded font isnt being used? Or are you saying when you compile the app locally it isnt working for you? Is everybody in the office using the same SDK version? Is there any consistency to the OS/Player/SDK being used versus who can/cannot compile?

                       

                      Your test case worked for me, although i had to add a few double quotes (which i assumed were stripped by the forum software).

                       

                       

                      <?xml version="1.0" encoding="utf-8"?>
                      <s:Application name="Spark_DefineFont4_cff_test"
                                     xmlns:fx="http://ns.adobe.com/mxml/2009"
                                     xmlns:s="library://ns.adobe.com/flex/spark"
                                     xmlns:mx="library://ns.adobe.com/flex/mx">
                      
                          <s:layout>
                              <s:BasicLayout />
                          </s:layout>
                      
                          <fx:Style>
                              @namespace s "library://ns.adobe.com/flex/spark";
                              @namespace mx "library://ns.adobe.com/flex/mx";
                      
                              @font-face {
                                  src: url("c:/windows/fonts/arial.ttf");
                                  fontFamily: ACaslonProRegularEmbedded;
                                  embedAsCFF: true;
                              }
                      
                              s|RichEditableText {
                                  fontFamily: ACaslonProRegularEmbedded;
                                  fontLookup: embeddedCFF;
                                  fontSize: 34;
                              }
                          </fx:Style>
                      
                          <s:RichEditableText id="textView"
                                              text="The quick brown fox jumped over the lazy dog. 01234567890"
                                              width="400"
                                              horizontalCenter="0"
                                              verticalCenter="0" />
                      
                      </s:Application>
                      

                      • 8. Re: Why can I not use an embedded font?
                        Scottae031 Level 1

                        That is an excellent question.  I never thought to check that.  Normally we all use the same SDK but the one co-worker (who succeeded in embedding) just got a new computer yesterday and hasn't updated his development environment yet.

                         

                        Flex SDK 4.1.0.16076 - Fails to embed

                        Flex SDK 4.0.0.14159 - Succeeds to embed

                         

                        I tried changing the SDK I am using from 4.1 to 4.0 and it works.  So is this a bug with 4.1?

                        • 9. Re: Why can I not use an embedded font?
                          Peter deHaan Level 4

                          I'm kind of doubting it. I was using the latest internal Flex Hero builds and everything was working fine for me. Our internal automated test suite uses embedded fonts almost exclusively, so I think it would be pretty strange if that behavior somehow broke without everybody noticing.

                           

                          If you have a test case that isnt working, please file a bug at http://bugs.adobe.com/flex/ and attach your Flash Builder Project FXP and I'll take a look.

                           

                          Peter

                          • 10. Re: Why can I not use an embedded font?
                            Scottae031 Level 1

                            I thought the same thing.  I was wondering why I wasn't seeing similar issues across the forums and blogs.

                             

                            Thank you for your help Peter.

                            • 11. Re: Why can I not use an embedded font?
                              Don Kerr Level 3

                              I'm having the same issue with Flex 4.5 Hero SDK.  I'm trying two different ways and neither embed the font:

                               

                              option 1

                              <fx:Style>

                              @namespace s "library://ns.adobe.com/flex/spark";

                              @namespace mobile "com.xd.mobile.*";

                              @namespace mx "library://ns.adobe.com/flex/mx";

                              @namespace  "*";

                              @namespace local "*";

                              @font-face {

                               

                              src:url("assets/MyriadPro-Semibold.otf");

                               

                              fontFamily: Myriad Pro-Semibold;

                               

                              embedAsCFF: true;

                               

                              }

                              </fx:Style>

                               

                              option 2

                               

                              [Embed(source="assets/MyriadPro-Semibold.otf",

                              fontFamily="Myriad Pro-Semibold",

                              mimeType='application/x-font', embedAsCFF='true')]

                              private var MyriadProSemibold:Class;

                               

                               

                               

                              Neither of these displays the correct font on Windows PCs.  my mxml tags call out fontFamily='Myriad Pro-Semibold' .

                               

                              I'm assuming Flex is compiling the MyriadPro-Semibold.otf into the swf and does not load it from the assets folder at runtime?

                               

                              Thanks,

                              Don

                              • 12. Re: Why can I not use an embedded font?
                                Peter deHaan Level 4

                                This works for me in Flex 4.1:

                                 

                                <?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">
                                
                                    <fx:Style>
                                        @namespace s "library://ns.adobe.com/flex/spark";
                                
                                        @font-face {
                                            src:url("assets/MyriadPro-Semibold.otf");
                                            fontFamily: "Myriad Pro-Semibold";
                                            embedAsCFF: true;
                                        }
                                
                                        s|RichText {
                                            fontFamily: "Myriad Pro-Semibold";
                                            fontSize: 64;
                                        }
                                    </fx:Style>
                                
                                    <s:RichText text="The quick brown fox jumps over the blah, blah, blah."
                                                width="400"
                                                horizontalCenter="0" verticalCenter="0" />
                                
                                </s:Application>
                                
                                You should be able to look at your SWF size and see if the font is being embedded correctly. Only thing I can see with your example is that you had spaces in the font name. You could try removing the space and see if that helps.
                                Peter

                                • 13. Re: Why can I not use an embedded font?
                                  Flex harUI Adobe Employee

                                  Have you tried a different font?

                                   

                                  No warnings in the debug console?

                                   

                                  Does the SWF size change significantly if you comment out the embedding of

                                  the font?

                                   

                                  How are you determining that it isn't working?

                                   

                                  If all else fails, post the SWF.

                                  • 14. Re: Why can I not use an embedded font?
                                    Peter deHaan Level 4

                                    I also tested your other example (ActionScript embed) on my Windows 7 machine w/ Google Chrome and it worked as expected:

                                     

                                    <?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">
                                    
                                        <fx:Script>
                                            <![CDATA[
                                                [Embed(source="assets/MyriadPro-Semibold.otf",
                                                        fontFamily="Myriad Pro-Semibold",
                                                        mimeType='application/x-font',
                                                        embedAsCFF='true')]
                                                private var MyriadProSemibold:Class;
                                            ]]>
                                        </fx:Script>
                                    
                                        <s:RichText text="The quick brown fox jumps over the blah, blah, blah."
                                                    fontFamily="Myriad Pro-Semibold"
                                                    fontSize="64"
                                                    width="400"
                                                    horizontalCenter="0" verticalCenter="0" />
                                    
                                    </s:Application>
                                    
                                    Peter

                                    • 15. Re: Why can I not use an embedded font?
                                      Don Kerr Level 3

                                      Interesting... My code is same.  Only diff I see is that in may cases, I'm using itemRenderers and I'm using 4.5 Hero

                                       

                                      <s:RichText id="lbl" textAlign="center" width="100%" maxWidth="100"
                                                          backgroundColor="#000000" backgroundColor.hovered="#ffff00" 
                                                          backgroundColor.selected="#ffff00"  color.selected="#000000" color.hovered="#000000"
                                                          fontFamily="Myriad Pro-Semibold" fontWeight="bold"  fontSize="14"
                                                          color="white"/>

                                       

                                       

                                      Other than swf size, is there a way to verify the font is embedded? Using debug/breakpoint?

                                       

                                      I'm testing the embed font by going from my Mac to my HP TouchSmart/Windows 7, which is defaulting to Windows 7 times roman.

                                       

                                      My assumption is otf will work in windows 7 if embedded ... correct?

                                       

                                      Don

                                      • 16. Re: Why can I not use an embedded font?
                                        Flex harUI Adobe Employee

                                        In that code snippet you set fontWeight="bold".  If you did not specify that

                                        on the @font-face, it won't match up.

                                         

                                        You can debug through the getEmbeddedFontContext call in RichEditableText

                                        (and probably RichText).

                                         

                                        Does the person who has it working use Win7?

                                         

                                        Another thing to check is the font-libraries in flex-config.xml.  Compare

                                        with the one on the computer that is building the working version.

                                        • 17. Re: Why can I not use an embedded font?
                                          Scottae031 Level 1

                                          Everyone where I am is using Win7.  For the flex-config.xml, the only difference I see in the fonts section is that advanced-anti-aliasing is set to false for the one that doesn't work:

                                           

                                          <advanced-anti-aliasing>false</advanced-anti-aliasing>

                                           

                                          While it is set to true for the one that does work:

                                           

                                          <advanced-anti-aliasing>true</advanced-anti-aliasing>

                                           

                                          But I doubt that is the issue.  I tried changing it and there was no difference with regards to the embedded font being used.

                                           

                                           

                                          I do see a change in file size if I embed the font vs. not embed.

                                          • 18. Re: Why can I not use an embedded font?
                                            Flex harUI Adobe Employee

                                            The most important part was the order of the font managers.

                                             

                                            Other than that, make a small debug SWF and post it.

                                            • 19. Re: Why can I not use an embedded font?
                                              Don Kerr Level 3

                                              the fontWeight='bold' not matching was my issue.  I removed the fontWeight from my RichText tags and the fonts appear correctly now.  Thanks for the tip!

                                               

                                              I was not aware that you had to have multiple embeds for each font variation you want to use in your application.

                                               

                                              Appreciate the help!

                                              Don

                                               

                                               

                                              Don  Kerr

                                              Space City Adobe User Group

                                              http://www.spacecityaug.com

                                              • 20. Re: Why can I not use an embedded font?
                                                Scottae031 Level 1

                                                So I finally figured it out.  Seems that I had a bum version of the 4.1.0.16076 SDK.  Since everyone in the office uses the same SDK, we all had the same issue.  I downloaded this SDK back when it was first released.  I recently downloaded a new version of it (as a last ditch effort) and now font embedding works.  So was this a known issue?  Was there another release of the 4.1.0.16076 SDK without a changing of the version number?  Or was this a fluke occurence?

                                                 

                                                P.S.  Thank you Peter for your exmaple here.