I've got a client that insists on a using a fancy script font for every headline on their site. That is great, but this font is probably the farthest thing from web-safe and I need to make it so that every computer user sees their fancy font. I could sit here and make close to 100 images, one for each page's title, but what happens when the client adds a new page to the site with our CMS? Exactly, we need a solution that is not only easy to implement, but easy to maintain.

It is not an uncommon solution to use Flash to embed our favorite font and display our titles to all using this font. We can query sting the data into our Flash movie and have it quickly build the title with ActionScript. Ok, that solves the easy to implement problem, but how about maintenance? Certainly, we cannot expect the client to know how to change a query string parameter in the Flash embed code. Rest assured, with a little JavaScript (using jQuery) we can make it so that all the user has to do it create an <h1> and have that morphed into our Flash header as the page loads.

Step 1: Create the Flash Movie

This is almost trivial if you know some Flash. We need to do two things, create the dynamic text box with our embedded font, then write the ActionScript one-liner to set its value based on our parameter.

First, create a new Flash movie with the size for your headline. Then, to embed a font,

1. Right click on the Library Pane and select 'New Font...'
2. Give this font a name and select from the drop-down list which font you would like to embed.
3. Click 'Ok', a font symbol will be placed in your movie's library.

Now, draw a text box on the stage and do the following using the Properties window,

1. Select 'Dynamic Text' from the drop-down (instead of static text or input text).
2. Give the text box an instance name, I have called mine 'myTitle'.
3. From the font drop-down select the font symbol you have created by name. Be sure that there is an asterisk next to the name, this tells us it is a font symbol.
4. Set any other text properties that you wish such as size, color, etc.
5. Click on the button labeled 'Embed...'.
6. Select the characters from this font which you will need to embed. Note, you will very unlikely need them all, just select the sets that will be actually used by your titles.
7. Click 'Ok'.

Finally, we will need to add the ActionScript to pull in a variable from the query string and set our text box to have this value. Click on the only frame in the timeline and open your Actions window. if you are using ActionScript 2.0 this is a simple one-liner:

All we need to do now is send in a value 't' and our title will be set as needed.

Publish the movie, upload to your web server and drop the embed code into your HTML. If you have called the movie myTitle.swf then make sure that you are specifying the title when referencing the swf source. For example, if your page title is 'Our Services' then the Flash movie we need to load should be myTitle.swf?t=Our+Services.

Step 2: Use JavaScript to replace the <h1>'s with our Flash titles.

Now that we have an instance of our Flash title working, we want to automate this so we need not go into the HTML source any time we want a different page title. We will achieve this by replacing every <h1> on the page with the equivalent Flash title.

I will use jQuery to do my heavy lifting. Also, I will be implementing SWFObject to place my Flash movies.

If you are following along with the code you see that we loop through each <h1> on the page, give that <h1> an ID, pull the content of the headline and send it into a Flash movie instance that we write to the <h1> element with SWFObject. This will effectively replace each <h1> on the page with a version that preserves the font of our choice.