Using Flash Fonts on the Web

I wrote recently about the set of Web Fonts we had designed a few years ago. As noted in that article one of the major shortcomings of that solution to web typesetting is that the end user has to have the fonts installed on his sysem for it to work. Giving the fonts away for free is an awkward answer to that problem, because it requires the user to come to the site, download the fonts, install them and then return to see it properly. Just not practical at all.

Another solution which comes closer to being satisfactory is to use fonts which take advantage of Flash technology and use what’s called Scalable Inman Flash Replacement (sIFR) which replaces the text on your page with text in a specified font in the Shockwave Flash (SWF) format. All this requires is that you convert the fonts you want to use to SWF format or download fonts in that format and install them where your site can access them and then have a plugin or Java script installed to handle the Flash implementation. You can also convert TTF fonts which you already have using an online tool called sIFR Generator. Or using the Flash developer software if you have it.

Obviously this method requires a lot more work in developing your website, but it really does produce a result which is seamless for the end user. For a Java script with instructions on how to make it work with SWF fonts, try the jquery script. I can provide a lot more guidance and experience for those using WordPress, where the implementation is made much easier with the WP-SIFR plugin which you install in your WordPress plugins folder. It includes a folder to put your SWF fonts in. You can then select which fonts to use and assign them to an otherwise unused text format variable in your CSS for your site like h1 or h2 or h3. Then, whenever you use that variable to define a text style, voila that text will show up in the SWF font you’ve assigned to it.

For example, I have h3 set to display text as the Barataria font at 14px

and h4 set to display text in the Agravain font at 18px.

There are some caveats.

In my opinion Flash fonts look a little bit blurry in small sizes, so if you want to use them for text I recommend testing a number of them to see which ones look good at small sizes. I do think that some of our web fonts work pretty well for Flash text as do some other fonts specifically designed for the web.

There are also some other challenges. Not all formatting works quite right with Flash fonts. As you can see I haven’t got the line spacing working as it should with these samples, which seems like it may be a problem in the conversion process. There are also a limited number of variables which will be free to use for fonts. Perhaps most importantly if you put a lot of text in Flash format it loads significantly more slowly.

As a general recommendation, I’d use Flash fonts sparingly and primarily for titles or decorative purposes. I haven’t yet committed to using them on any of my sites, including this one, though I think that plugging the right font into the titles is worth considering.

Not a perfect solution or one I’ve entirely mastered yet, but something worth playing with, anyway.

in: Articles · tagged: , , ,

Leave a Reply