FontReader, convert TrueType fonts in graphics with Flex

In the last period I was trying to find a way to convert a TrueType font character into graphics for a new Flex project.
First I found a way using TTX which can convert a font file into an XML with all the Glyph informations needed to recreate the font outline.

But this process requires that all the .ttf files should be converted using TTX before thay can be used in Flash.
So I investigated a bit more and I found a really useful and really well done java project: TypeCast.
What I’ve done next was just to do a porting of the available java code into Actionscript 3 and it works like a charm! It can read a .ttf file and extracts all the font informations, including all the glyph outlines.

See a demonstration of thie Flex application.

Here you can download the source code:

Source files for the FontRenderer flex project
Title: FontRenderer Source (0 click)
Caption: Source files for the FontRenderer flex project
Size: 552 kB

  • Wow, that’s brilliant Alessandro!
    What are the chances of seeing the AS3 code?

  • sweetness!
    please share…

  • Don’t worry, I will as soon as possibile.

  • Thats awsome!!

  • Little addition.. glyphs are now editable using control handles.
    Luke, remeber to clean the cache first 🙂

  • design4use

    wow great job, can’t wait to see how you converted the java code to as3…:-)

  • Ciao Alessandro!
    Thanks for putting this online. I’m looking forward to see more from this experiment. finally no need to trace on graph paper font coordinates anymore 🙂

  • Mario

    Any chance of getting the sources to this soon? I’ve started down this path. Looks like about three days of slogging for the port?

  • Mario

    Waited … waited … waited …
    And now I’m starting in on duplicating your effort. Looks like my initial estimate on this task was optimistic. Am about a fifth done at day 3.
    Still wading through porting over the font handling code, getting close on that. I suspect you had some nice components to leverage for the vector editing features. Seems like it will take some effort to duplicate that bit.
    Oh well.

  • @Mario
    Sorry, you’re right. Anyway I can post the code from the parser, but not the vector renderer (because it’s part of a commercial project).
    If you want I can send you by mail

  • Dan

    I’ve been keeping an eye on this page as well. Any code you can post would be awesome. Any code you can’t is understandable.

  • Here the FontRenderer source code.
    Sorry but I cannot include the points “render” engine because part of another project.
    BTW, see at the class to see how the path should be created once the FontRenderer class has parsed a font file.

  • Mario

    In case Dan is reading this … if this is of interest, perhaps we can collaborate on some of this. I now have chunks of the editor working thanks to Allessandro. We just need to sort out how to make contact. Perhaps Allesandro can bridge the gap here. I don’t mind being contacted by Dan.

  • Jp

    I try looking at this code that could be a plus for me, but I understand nothing, thx for sharing, but could it be explain a little ?

  • Hey, I am trying to get this to work. I have it all setup in Flex and can run it but I don’t see any fonts in the list. What do I need to do??? Thank you.

  • /**
    @param factor a 16.16 fixed value
    public function scale( factor:int ):void


    for (var i:uint = 0; i {
    GlyphPoint(_points[i]).x = ((GlyphPoint(_points[i]).x > 26;

    GlyphPoint(_points[i]).y = ((GlyphPoint(_points[i]).y > 26;


    _leftSideBearing = (( _leftSideBearing * factor) >> 6);

    _advanceWidth = (_advanceWidth * factor) >> 6;


    What does it mean by 16.16 (in comment) as I use it like scale(16) or scale(8)?
    Its not working for me as points are converted into 0.

  • 😀 OK got it. But after scaling, things got zagged. 🙂 Not able to recognize the character. There wld be something else. lets find out.