Front end development is always an adventure. Today I found something I forgot even was a thing: Using Flash to render non-web safe fonts. Back in the day when @font-face support was limited, the only real way to ensure custom fonts for (virtually) all users were using image files or using a flash file. The later of the aforementioned lead to an inventive solution, Scalable Inman Flash Replacement (sIFR), which allows a javascript/flash driven approach. JS was used to target page elements, read the text contained on the page, and overlay an SWF containing the same content with the customized font over the top and feed the SWF the text. This was used in 2005, and really was genius as:

  • Any desired font could be embedded into the flash file
  • No images were required
  • The same flash file would be used through the site, thus cachable and more efficient than images for bandwidth
  • Any copy updates to the HTML were reflected immediately as the JS simply fed the text into the SWF
  • Most people had flash, and if they didn't, the text in question would still be rendered as plain ol' text, just not with a custom font
  • Predates jQuery

For the truly curious, you can find the sifr generator here.

Sure you took a significant performance ding in 2005 for polluting your site with random SWFs but ended up with a site with custom fonts. It was an elegant application to a stupid solution.

Fast forward to 2016: Flash is dead and websites now ask for permission to run flash. This is an unforeseen problem as it doesn't fail gracefully in modern browsers and in the case of FireFox leaves black squares on the web site, waiting for the user to allow flash to run.

unrendered block of text flash has failed firefox

How to fix

Fortunately the quick fix is easy, remove the sIFR.js. Look for sIFR.replace in your JS to see all the targeted text that's being replaced with an SWF, to write out new CSS rules to format. Hunting down the fonts can be a bit of a chore but hopefully the swfs are named after the font. If you can't find webfont versions, just hit the usual grounds of Google Fonts or Font squirrel to find "like" font replacements. In 2016, its unlikely many sites are still up using sIFR.js. Good luck out there!

Example of sIFR

var euro = {
  src: '/swf/clarendonCondensed.swf',
	wmode: 'transparent'
};
sIFR.activate(euro);
sIFR.replace(euro, {
  selector: '#col1 h2',
	css: [
    '.sIFR-root { color: #589f28; font-size: 36px; text-align:left; cursor:pointer; }'
  ]
});