Uploaded image for project: 'Apache Flex'
  1. Apache Flex
  2. FLEX-34348

Embed Font using @font-face in Flex SDK4.11

    Details

      Description

      I am trying to load external stylesheet via styleManager.loadStyleDeclarations() method, the embedded font in stylesheet is not getting reflected in my application. But if I use <fx:Style> tag inside application with same contents available in stylesheet, the embedded font is getting reflected. I am using Flex4.11 SDK.

      Sample I worked out is listed below,

      EmbedFont.css:
      ------------------
      @namespace s "library://ns.adobe.com/flex/spark";
      @namespace mx "library://ns.adobe.com/flex/mx";

      @font-face

      { src: url("font/GOTHICB.ttf"); fontFamily: centuryGothicBold; advancedAntiAliasing: true; embedAsCFF: true; fontWeight: bold; }

      .mypanelTitle

      { color: #b56a00; fontFamily: centuryGothicBold; fontSize: 12; }

      EmbeddedFontFace.mxml:
      ---------------------------------
      <?xml version="1.0"?>
      <!-- fonts/EmbeddedFontFace.mxml -->
      <s:Application
      xmlns:fx="http://ns.adobe.com/mxml/2009"
      xmlns:mx="library://ns.adobe.com/flex/mx"
      xmlns:s="library://ns.adobe.com/flex/spark" creationComplete="init()" width="100%">

      <fx:Script>
      <![CDATA[
      import mx.styles.StyleManager;

      private function init() : void

      { var styleLoadEvent:IEventDispatcher = StyleManager.loadStyleDeclarations("EmbedFont.swf",true); // If I use this, embedded Font is not applying to 'myPanel' component }

      ]]>
      </fx:Script>

      <!-- <fx:Style> <!-- If I use this instead of StyleManager class, embedded Font is applying to 'myPanel' component -->
      @namespace s "library://ns.adobe.com/flex/spark";
      @namespace mx "library://ns.adobe.com/flex/mx";

      @font-face

      { src: url("font/GOTHICB.ttf"); fontFamily: centuryGothicBold; advancedAntiAliasing: true; embedAsCFF: true; fontWeight: bold; }

      .mypanelTitle

      { color: #b56a00; fontFamily: centuryGothicBold; fontSize: 12; }

      </fx:Style> -->

      <s:Panel id="myPanel" title="Embedded Font Applied With Type Selector" styleName = "mypanelTitle" horizontalCenter="0" >
      <s:VGroup>
      <s:RichText width="250" >
      <s:text>
      The text in this RichText control uses the font set on the VGroup.
      </s:text>
      </s:RichText>
      </s:VGroup>
      </s:Panel>

      </s:Application>

      Please let me know anything I missed out using styleManager.loadStyleDeclarations(). Kindly revert back to me asap.

        Attachments

          Activity

            People

            • Assignee:
              Unassigned
              Reporter:
              mohanraj.n@ramco.com Mohanraj N
            • Votes:
              0 Vote for this issue
              Watchers:
              2 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: