[FLEX-34348] Embed Font using @font-face in Flex SDK4.11

• Type: Bug
• Status: Resolved
• Priority: Critical
• Resolution: Not A Problem
• Affects Version/s: Apache Flex 4.11.0
• Labels: embedded-fonts flex4.11 flexsdk font font-face
• Assignee: Unassigned
• Reporter: Mohanraj N
• Created: 02/Jun/14 07:27
• Updated: 21/Jun/14 15:12
• Resolved: 21/Jun/14 15:12

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.