Skip to main content
Known Participant
July 21, 2009
Answered

How in the World can you embed Fonts?

  • July 21, 2009
  • 2 replies
  • 10188 views

Dear ladies and gents,

we have just integrated textflow in rather larger Flex/Flash dynamic Framework. All is working out quite well, except for the embed fonts issue. We spend hours after hours trying to make it work ... no dice.


Could you pretty pretty please describe one more time the best practice to use dynamically loaded fonts with TLF?

a) the most practicle way of using dynamic fonts would be to load SWFs at runtime ... am I correct?

So we bought newest Flash CS4, hoping to have cff=true  Option with embedding fonts.

  [Embed(source='C:/WINDOWS/Fonts/Arial.ttf', fontName='_Arial',  cff='true')]
  public static var _Arial:Class;

--> does not work, Flash tells us: cff not supported by flex2.compiler.media.FontTranscoder'

What Flash CS4 has to do with Flex of any compilation escapes me, but you guys probably know, why you did it.

b) from lots of tipps in Forums I read, Installing Flex Gumbo might be of help. Tried that, too, including the new SDK (last stable build, then last nightly build) in Flex Compiler 3.2. But it is not the best solution, since Gumbo functions different in quite some ways and we would have to rewrite most of our framework, which we will not manage in short time.

c) we looked through most examples posted ages ago and they partly do not work with current stable and nightly builds any more, since too much has changed.

So - I would greatly appreciate your help, with a current and working example or approach of how to do it, since we have to deliver out the new solution and really, not being able to include any fonts at all with TLF is quite a dealbreaker for our customers.

See it as desperate cry for help after an incredible amount of frustrating head banging on the issue and wolfing through tons of "help" pages with having only humble abilities in understanding English language.

This topic has been closed for replies.
Correct answer Abhi.G.

Hi,

Your concerns about using Flex Gumbo SDK may be addressed on the Flex forum.

Assuming you are unable to use Flex Gumbo SDK for your entire project, you can still use it for font embedding.

1. Create a separate Flex 4 project whose output is a Flash .swf file that embeds the fonts you need.

2. Use the fonts .swf in a Flex 3 project

These steps are outlined in this blog post: http://blogs.adobe.com/tlf/2008/11/

For now, I would recommend using the Flex Gumbo SDK Beta1 build of a bug introduced in a later build.

Hope this helps,

Abhishek

2 replies

Participating Frequently
May 7, 2010

Ah, this issue creeping up, yet again.

  • First, you need to compile your application with the Flex 4 SDK. ISWFContext is not part of SDK 3.3 and was added AFTER the beta 2 release of Flash Builder 4 (final release build unless you are keeping track of the nightlies).
  • You are going to have issues using the TLF framework with Flex 3.3 because the TLF released with the final build of Flash Builder 4 introduces the ISWFContext and the issues around this. To circumvent this, use the TLF build that was released with Flash Builder 4 beta 2, around November of 2009.
  • Second, there is a bug in the framework. Fonts are not properly dealt with in the final Flex 4 SDK.
  • ISWFContext should ONLY be necessary if you do not intend to register the font yourself. The only reason to use ISWFContext is if you are loading, at runtime, the SWF file through Flex and not calling Font.registerFont(). Consider this another bug in the framework
  • If you are using Font.registerFont, you will need to override the GlobalSettings lookup to determine whether or not the font is an embedded font or a dynamic font. This is a hack, at best, because it shouldn't matter because in this case, you are registering the font yourself and you shouldn't need to add it to the registry within the Flex framework. It should just work.
  • GlobalSettings.resolveFontLookup was introduced after FB4 beta 2 so, again, you will need to build against Flex 4 release for this to all work (and it does work but it's still somewhat busted).


Unfortunately, there is no publically avialable best practice that I've seen to deal with runtime font loading if you are registering the font yourself. Some links below that may help with this issue:

My original post on the topic:

http://forums.adobe.com/message/2753744#2753744

Another post regarding this:

http://forums.adobe.com/message/2672002

A reasoning and a potential workaround (if you are using Font.registerFont yourself this is not applicable)

http://marcel-panse.blogspot.com/2010/03/embedded-fonts-in-tlf-and-swfcontexts.html

The related bug in the framework:

http://bugs.adobe.com/jira/browse/SDK-26187

It's pretty maddening if you ask me. While I appreciate Adobe opening this up to the community SDK, it's still a broken issue. Registering fonts manually by yourself is a 100% valid approach to dealing with runtime loaded fonts. It's a native player feature and the Flex 4 SDK breaks this core feature.

The combination of the GlobalSettings.resolveFontLookup override AND setting an ISWFContext (even if one is not even available) will allow for the fonts to work if you use mixed fonts in a spark RichEditableText area (a valid approach). You only need to set one of them - if you use 30 different fonts in the same text area, they'll all magically start working provided they are loaded from the same domain.

Alternately, I've found another potential work around in that if you create a new instance of the font after it's been loaded (in your main.mxml or somewhere) such as myfont = new FontClassYouLoaded() then it will work.

Aaronius9er9er
Inspiring
May 7, 2010

Jo, when I attempt to load your font swf (http://www.skycoversum.de/skyco9/test3/Fverdana.swf) I get the following runtime error:

VerifyError: Error #1014: Class mx.core::FontAsset could not be found.

Interestingly enough, I also get the same error when I browse directly to that address in a browser.

----------------

bustback,

Thanks for the details of the problems you ran into.  I figured I'd run into the same problem with dealing with multiple fonts and only being able to specify a single swf context.  I figured I'd get one working and then worry about getting it to work with multiple.  But, it looks it would be much simpler just to get Font.registerFont working.  So far it's failed me at every avenue.

I've recreated my projects just to make sure I've narrowed down the scope.  I'm also building both the font library (the swf that gets loaded in) and the main app in Flex 3.3. I'm not even worrying about the text flow yet.  I just want to be able to load in a font swf, register the font, then enumerate the fonts and see it listed as an embedded font in the main app.

When calling Font.registerFont(), I get the following error:

ArgumentError: Error #1508: The value specified for argument font is invalid.
    at flash.text::Font$/registerFont()
    at FontApp/completeHandler()

Here's my code for the app:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600"
                    creationComplete="application1_creationCompleteHandler(event)">
     <mx:Script>
          <![CDATA[
               import mx.events.FlexEvent;
          
               protected var loader:Loader;
               
               protected function application1_creationCompleteHandler(event:FlexEvent):void
               {
                    loader = new Loader();
                    loader.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);
                    var request:URLRequest = new URLRequest('http://aaronhardy.com/transfer/FontLib.swf');
                    var loaderContext:LoaderContext = new LoaderContext(false, ApplicationDomain.currentDomain);
                    loader.load(request, loaderContext);
               }
               
               protected function completeHandler(event:Event):void
               {
                    var FontLib:Class = event.currentTarget.applicationDomain.getDefinition("FontLib") as Class;
                    var Arial:Class = FontLib.ARIAL_FONT;
                    Font.registerFont(Arial);
                    var fonts:Array = Font.enumerateFonts(false);

                    trace(fonts);

               }
          ]]>
     </mx:Script>
</mx:Application>

and here's the code for the font library:

package
{
     import flash.display.Sprite;
     import flash.text.Font;
     
     public class FontLib extends Sprite
     {
          [Embed(
               source="arial.ttf",
               fontFamily="Arial"
          )]
          public static const ARIAL_FONT:Class;
          
          public function FontLib()
          {
               super();
          }
     }
}


I've tried both verdana and arial fonts that I've pulled from my C:\Windows\Fonts folder and it always throws the error.  Once I get this resolved I should be able to get started with the text flow integration.

Known Participant
May 7, 2010

If you would, try this adress http://www.skycoversum.de/skyco9/test3/. It

plainly shows a dynamically loaded Verdana,. See above stated source to

apply.

Cheers, Jo Klappenbach

Abhi.G.Correct answer
Participating Frequently
July 21, 2009

Hi,

Your concerns about using Flex Gumbo SDK may be addressed on the Flex forum.

Assuming you are unable to use Flex Gumbo SDK for your entire project, you can still use it for font embedding.

1. Create a separate Flex 4 project whose output is a Flash .swf file that embeds the fonts you need.

2. Use the fonts .swf in a Flex 3 project

These steps are outlined in this blog post: http://blogs.adobe.com/tlf/2008/11/

For now, I would recommend using the Flex Gumbo SDK Beta1 build of a bug introduced in a later build.

Hope this helps,

Abhishek

Known Participant
July 21, 2009

Hi Abhishek,

thanks for your prompt response. Your approach really worked and I will post the complete working code, if anyone is interested. IT IS POSSIBLE to use dynamically embedded fonts

1) create a ActionsScript Project in Flex and Export into Release Build as swf. Use GUMBO SDK, if earlier than 7400, use cff="true", if later use

embedAsCFF="true" (avoiding that compiler2 error warning)

package

{

import flash.display.Sprite;

import flash.text.Font;

public class lib_font_2 extends Sprite

{

[

Embed(source="assets/Arial.otf", fontFamily="ArialEmbedded", cff="true")]

public const ArialEmbeddedFont:Class;

public function lib_font_2()

{

     Font.registerFont(ArialEmbeddedFont);

}

}

}

2) in Flex, use a simple Loader, load the external swf and on loading done the font can be used by referencing in Tlf e.g.

fontFamily='ArialEmbedded' fontLookup='embeddedCFF'

Thank you!

January 17, 2010

Thank u . I am a beginner pls send me th code in flex for loading fonts when loading page(I failed to get th font names from enumerateFont object)