9 Replies Latest reply on Aug 11, 2009 6:55 AM by Handycam

    Embed fonts?

    Handycam Level 1

      I need to embed a font into my application, and I tried to do it the way I did in Flex 3, via  css:

      @font-face { src: url(neutratext.swf); fontFamily: "NeutraText TF Demi"; }
      
      .neutraDemi {
           fontFamily: 'NeutraText TF Demi';
      }
      

      Except it gives me an error:


      font 'NeutraText TF Demi' with normal weight and regular style not found    styles.css    HeirloomTomatoGame/src/assets    line 1    Flex Problem


      Unable to transcode neutratext.swf.    styles.css    HeirloomTomatoGame/src/assets    line 1    Flex Problem

       

      Do I have to do this sort of thing differently in FB4, or is it just this font?

        • 1. Re: Embed fonts?
          Peter deHaan Level 4

          Handycam,

           

          What if you try embedding the TTF font directly instead of via a SWF file?

           

          Sorry, I don't have that particular font on my system, so I cannot test it directly.

           

          Peter

          • 2. Re: Embed fonts?
            Handycam Level 1

            I thought the  only way to use a font like that was via a SWF.  How do I

            embed directly?

             

            Also this is an OpenType font, not TTF.  Do I have to use TTF?

            • 3. Re: Embed fonts?
              Peter deHaan Level 4

              The following example shows how you can embed fonts for Spark controls/containers (using embedAsCFF=true) vs embedding fonts for Halo controls/containers (using embedAsCFF=false):

               

              <?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">
                  
                  <fx:Style>
                      @namespace s "library://ns.adobe.com/flex/spark";
                      @namespace mx "library://ns.adobe.com/flex/halo";
                      @font-face {
                          src: url("C:\Windows\Fonts\ArnoPro-Regular.otf");
                          fontFamily: EmbArnoCFF;
                          embedAsCFF: true;
                      }
                      @font-face {
                          src: url("C:\Windows\Fonts\ArnoPro-Regular.otf");
                          fontFamily: EmbArno;
                          embedAsCFF: false;
                      }
                      s|SimpleText {
                          fontFamily: EmbArnoCFF; /* embedAsCFF=true */
                          color: haloBlue;
                          fontSize: 24;
                      }
                      mx|Label {
                          fontFamily: EmbArno; /* embedAsCFF=false */
                          color: haloGreen;
                          fontSize: 24;
                      }
                  </fx:Style>
                  <s:VGroup horizontalCenter="0" verticalCenter="0">
                      <s:SimpleText text="Spark SimpleText with embedded OTF font" />
                      <mx:Label text="Halo Label with embedded OTF font" />
                  </s:VGroup>
              </s:Application>
              

               

               

              I happen to be using Flex SDK 4.0.0.9118, so the syntax may be slightly different depending on which version of the SDK you are using (I always recommend the latest nightly Flex 4 SDK build from http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4, as there has been a lot of API changes since the beta1 SDK that shipped with the Flash Builder 4 beta. If you are switching from the beta1 build of the Flex SDK to the latest nightly builds, you can see a pretty good list of API changes at http://opensource.adobe.com/wiki/display/flexsdk/Rename+List.

               

              Peter

              • 4. Re: Embed fonts?
                Peter deHaan Level 4

                Of COURSE it kind of ate my code:

                 

                @font-face {
                src: url("C:\Windows\Fonts\ArnoPro-Regular.otf");
                fontFamily: EmbArnoCFF;
                embedAsCFF: true;
                }

                 

                Peter

                • 5. Re: Embed fonts?
                  Handycam Level 1

                  Yes, no luck.  I tried this:

                  <?xml version="1.0" encoding="utf-8"?>
                  <s:Panel xmlns:fx="http://ns.adobe.com/mxml/2009" 
                             xmlns:s="library://ns.adobe.com/flex/spark" 
                             xmlns:mx="library://ns.adobe.com/flex/halo" 
                             width="125" height="50" skinClass="skins.NameTagSkin">
                       <fx:Script>
                            <![CDATA[
                                 import skins.NameTagSkin;
                                 [Bindable]
                                 public var tagLabel:String;
                            ]]>
                       </fx:Script>
                       <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("/Users/stevelombardi/Library/Fonts/SanvitoPro-Regular.otf");
                                 fontFamily: SanvitoPro;
                                 embedAsCFF: true;
                            }
                  
                            s|SimpleText {
                                 fontFamily: SanvitoPro; /* embedAsCFF=true */
                                 color: haloBlue;
                                 fontSize: 24;
                            }
                       </fx:Style>
                       <s:SimpleText id="cardLabel" text="{tagLabel}" lineBreak="explicit" color="#000000" verticalAlign="middle" textAlign="center" fontWeight="bold" width="100%" height="100%"/>
                  </s:Panel>
                  

                  But nothing happens, plus I get the warning "CSS type selectors are not supported in components: 'spark.primitives.SimpleText'     line 27    Flex Problem"

                   

                  If I use a class instead of s|SimpleText no more error, and the text is 24 point, but no embedded font. I am using the engdrop 2444492.

                  • 6. Re: Embed fonts?
                    Handycam Level 1

                    I tried a different font, one with a simple "regular, bold, italic, bolditalic" format, plus used a class name, and it seems to work.

                     

                    <?xml version="1.0" encoding="utf-8"?>
                    <s:Panel xmlns:fx="http://ns.adobe.com/mxml/2009" 
                               xmlns:s="library://ns.adobe.com/flex/spark" 
                               xmlns:mx="library://ns.adobe.com/flex/halo" 
                               width="125" height="50" skinClass="skins.NameTagSkin">
                         <fx:Script>
                              <![CDATA[
                                   import skins.NameTagSkin;
                                   [Bindable]
                                   public var tagLabel:String;
                              ]]>
                         </fx:Script>
                         <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/miso-regular.ttf");
                                   fontFamily: miso;
                                   embedAsCFF: true;
                              }
                    
                              .cardFont {
                                   fontFamily: miso; /* embedAsCFF=true */
                                   color: haloBlue;
                                   fontSize: 24;
                              }
                         </fx:Style>
                         <s:SimpleText id="cardLabel" text="{tagLabel}" lineBreak="explicit" verticalAlign="middle" textAlign="center" width="100%" height="100%" styleName="cardFont"/>
                    </s:Panel>
                    
                    • 7. Re: Embed fonts?
                      Peter deHaan Level 4

                      I believe the embedded font wouldn’t really work as expected because you're only embedding the normal/regular font face but the SimpleText control is trying to use a bold font face. It worked for me locally when I also embedded SanvitoPro-Bold.otf.

                       

                      Peter

                      • 8. Re: Embed fonts?
                        Peter Farland Level 3

                        Also note since the StyleManager is global, type selectors cannot be declared in custom components - they should be declared in the top level MXML application.

                        • 9. Re: Embed fonts?
                          Handycam Level 1

                          Thanks, explains the warning.