Things That Work

This was extremely frustrating, so I’m posting in the hopes that I can save others the same frustration.

So as you may know from my recent posts, I’ve been working on a huge Flex app for Grooveshark. We’re getting ready to launch it (probably in the next few hours actually), and our lead designer John and I were going through the app for some final visual tweaks. Button labels and input boxes were lovingly pushed a pixel here, a pixel there, until they looked just right.

Then we saw the app on Linux. It looked HORRIBLE. Half the text was far too low. You couldn’t even see the tails on letters like ‘g’ and ‘y’. Suspicious, we checked it on a Windows machine. The text was also lower than on my Mac, though not as bad as on Linux. Windows only was only lower by about 4 pixels, Linux more like 10-15. I was baffled. Flash is Flash is Flash, right? The font was an embedded OpenType version of Helvetica that we bought just for this purpose. Why would the font render differently depending on the operating system?

I read about Flash’s different font managers, and thought perhaps the issue was that using an OpenType font forces the use of the AFEFontManager instead of the BatikFontManager. So I tried embedding a TrueType font instead, but it made no difference. The text was still just as skewed in Linux and Windows as it was before.

Eventually I found this blog post and decided that embedding the font via SWF was worth a try. I had originally decided to embed via a font file instead of swf because swf seemed to add more bulk to the compiled app, and honestly, this app is already huge.

Anyway, I embedded Helvetica via SWF instead of OpenType, and it worked! The application now renders identically cross-platform. So if anyone else out there is having trouble with cross-platform font rendering in Flex, try embedding your fonts via SWF.