Displaying dynamic text headings with custom fonts

By Josep Valls
http://josep.valls.name

Overview

Sometimes you want to use a custom font on a website heading or title, to do so, you must ensure that the visitor have the font registered on its system, if not, the default font will be displayed wich will be annoying. To solve that, you could either use an image or a Flash movie to achieve this purpose. In this article I'll expose how to create a Flash object which dinamically loads its text.

Using Flash Objects

Below is a Flash object with a custom font embedded.

The problem is that you will need to create images or flash objects for each text on your website.

You could also have a Flash object with a custom font embedded on it, read the text to be displayed passed through a parameter.

To do so, create a new Flash document:

  1. Create a new textfield, and set is a Dynamic Text in the Properties panel.
  2. In the Var field, type the name of the variable you'll be using when passing the text, for instance mytext.
  3. Select the font you'd like to use.
  4. Click the Embed... button to embed the font into the Flash object on publishing, select the subsets you'll need to use. I'll need some extra characters, so I'll select Punctuation, Basic Latin and Latin I.
    Note: In older Flash versions, embedding was different, you should check some small buttons for each glyph set.
    Note: More glyphs, bigger will be the Flash object.
  5. Add a new layer, add a keyframe and set a stop(); action.
  6. Select File/Publish Settings, and select, under the Flash tab, Version field, Flash player 4.
    Note: I began using this trick with Flash 4. I found some problems with earlier versions of Flash, if someone could tell me a better way, please mail me.
  7. Publish.
  8. Remember to set the variable in the param and embed tags when adding the Flash object to your website.

Note: While the Flash object is loading, the text won't be displayed, there is another trick to fix it:

  1. Make the movie 2 frames long.
  2. Move the keyframe with the stop(); action to the second frame.
  3. Add a new keyframe in the second frame of the textfield layer.
  4. Select the textfield in the first keyframe and set a default font of your choice for it, I'll recommend using _sans, _serif or _typewriter.
  5. Test your movie and use the Bandwidth Profiler to check how it loads.

This way, the text will be displayed using a system font until your custom font is loaded.

Note: Bear in mind that you may not be able to do many Flash specific transformation to the textfield which won't work with dynamic text like rotating or animating the text.

Your file is ready to insert on your website.

flash_text.swf?mytext=sample

Note: If you want to use special characters (non english characters like è, ô, ï...) or spaces and punctuation, you'll need to embed them and escape (formerly encode in URLStringEncoded) the value of the parameter.

flash_text.swf?mytext=escaped%20%BFtext%3F

You could use EscapeStrings to quickly and easily escape character strings.

Support files

flash_text.fla
flash_text.swf
Flash source and exported file used in the above examples

flash_text2.fla
flash_text2.swf
Flash source and exported file used in the above examples with loading improvements

EscapeStrings.exe
Small tool for escaping strings. Self extracting, no installation. Requires Internet Explorer 5.0.

Downloads, updates and further information

Download all support files (EscapeStrings_flash_text.zip)

http://sourceforge.net/projects/escapestrings
SourceForge.net project page for Escape Strings

http://josep.valls.name
Visit my website and mail me your suggestions or comments