4 Replies Latest reply on Apr 13, 2010 7:34 AM by FTQuest

    Embedding fonts in FB4

    rcanulla Level 1

      Hi there,

       

      Two things,

       

      One, I am embedding fonts like this.

                @namespace s "library://ns.adobe.com/flex/spark";
                @namespace mx "library://ns.adobe.com/flex/halo";
                
                @font-face {
                     src: url("assets/calibrib.ttf");
                     fontFamily: "Calibri";
                     embedAsCFF: true;
                }
                
                s|RichEditableText {
                     fontFamily: Calibri;
                     fontLookup: embeddedCFF;
                     fontSize: 34;
                }
                s|RichEditableText {
                     fontFamily: Calibri;
                     fontLookup: embeddedCFF;
                     fontSize: 34;
                }
      

       

      First, the font is not embedded on systems without calibri, can I embed in the application in some way? Second, I get this warning. ANy thoughts?

      Description     Resource     Path     Location     Type
      CSS type selectors are not supported in components: 'spark.components.RichEditableText'     Widget.mxml     /RelayWIdget/src/com/ryancanulla/relayWidget/views     line 161     Flex Problem
      
      
        • 1. Re: Embedding fonts in FB4
          Peter deHaan Level 4

          This worked for me (Flex 4.1 nightly build):

           

          <?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";
                  @namespace mx "library://ns.adobe.com/flex/mx";
                  
                  @font-face {
                      src: url("c:/windows/fonts/calibrib.ttf");
                      fontFamily: "Calibri";
                      embedAsCFF: true;
                  }
                  
                  s|RichEditableText {
                      fontFamily: Calibri;
                      fontLookup: embeddedCFF;
                      fontSize: 34;
                  }
              </fx:Style>
              
              <mx:Label id="sdkVer" initialize="sdkVer.text = mx_internal::VERSION;" />
              
              <s:RichEditableText id="ret"
                      text="The quick brown fox jumps ove the lazy dog."
                      width="300"
                      horizontalCenter="0" verticalCenter="0" />
              
          </s:Application>
          

           

          Which version of the Flex SDK are you using? I noticed you had the old "halo" namespace and not the newer "mx" namespace.

           

           

          Also, your code should embed the Calibri font since you have it in your project ("assets/calibrib.ttf"). So it shouldnt matter if the system has the Calibri font installed. MY code on the other hand wouldnt compile if the user didnt have Calibri in their C:\Windows\Fonts\ folder (or happened to be using a Mac or ...).

           

          Peter

          • 2. Re: Embedding fonts in FB4
            FTQuest Level 3

            Type selectors indeed are NOT supported in components. Note that Peter's example is application, not a component.

            HTH,

            FTQuest

            • 3. Re: Embedding fonts in FB4
              rcanulla Level 1

              Should I just set that in the main application?

              • 4. Re: Embedding fonts in FB4
                FTQuest Level 3

                Not necessarily.

                There are some options; e.g. instead of using type selector you could set the 'styleName' attribute in the component's mxml and define this style in the CSS block of the component (in case your component is mx you should add one more line to the CSS definition:

                textFieldClass: ClassReference("mx.core.UIFTETextField");

                 

                I'd recommend Peter's excellent site: http://blog.flexexamples.com

                I believe he has covered embedding fonts extensively.

                 

                HTH,

                FTQuest