Sprite Fonts, The How, What, When, & Where

  • 94 favourites


Attached Files

The following files have been attached to this tutorial:



Download now 1.26 MB


14,294 visits, 33,806 views



This tutorial hasn't been translated.


This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Everything you always wanted to know about Sprite Fonts, and the ways and tools to create them. Yes, and free example fonts too.

[Latest update is the FAQ #6 which details an alternative plugin allowing correct spacing while editing.]

Who Wrote This?

Paradox (a.k.a. Brian Kissinger) Started it, but others are welcome to expand, clarify, or update any part. (at least PM me if you see a typo.)

My qualifications? While I have made a few True Type fonts before, I made hundreds of hand drawn Commodore 64 8 bit fonts. If you remember Q-Link before it became AOL, I made the custom fonts for the chat rooms. But since that was before the Internet, it probably doesn't count.

The tool, "GiveYourFontsMono" mentioned under "Where" on page 2 was written by Blackhornet.

What Is A Sprite Font?

A Sprite Font is an alternative to using the normal text objects. It allows the use of image based fonts which offer complete artistic control and less possibility that they may not work as expected.

See "How" on page 3 for their use.

Click here to download the example capx.

(it is using the latest beta r141)

When Is It Better To Use A Spritefont?

Using fonts can be rather inconsistent, as they differ slightly browser to browser. Spritefonts on the other hand, are graphics in your project. Also while fonts can change single colors easier, the Spritefonts can be full color images that match the theme of your project.

1. If you need things to align precisely and look the same in all browsers, use Sprite Font.

2. If you need graphic fades, outlines, drop shadows, or other static effects, use a Sprite Font.

3. If you need a wide range of sizes, bold, italic, color changes that don't require filters, then Sprite fonts will not work.

4. If you are presenting a story for the reader, or full pages of text, it might be more efficient with a regular font.

5. If you are having trouble getting regular fonts to work in different exporters, or offline, try switching to a Sprite Font.


  • Order by
Want to leave a comment? Login or Register an account!