Command Line Base64 Encoding

01 Apr 2011

I'm currently authoring an AIR 2.5 application in HTML/CSS/JS and ran into some issues with @font-face embedding where no matter what I did the fonts would not load and render correctly despite trying both TTF and OTF versions.  After that, I opted to try base64-encoding of the fonts for inclusion via a data url, since they are now supported in AIR.  I'm running on OS X and have openssl installed, so I opted to run the following command, which I've used in the past for generated base64-encoded files for other Webkit-based projects and didn't have any issues:

shell# openssl base64 -in UniversLTStd.otf -out Std

This produced a proper base64 file that worked perfectly in Safari, but when the same encoded file was inserted into CSS and launched in the AIR runtime, it resulted in the display of the default font. After ruminating a bit on the issue, I suspected that the line breaks produced by the openssl encoding were the issue, and not feeling particularly like removing line breaks by hand on 709 lines of code, I busted out the following:

shell# tr -d '\r\n' < Std > StdNoBreaks

I then used the output in the resulting file as the data url and it worked like a charm in the AIR runtime with the following CSS:

src: url("data:font/opentype;charset=utf-8;base64,[INSERTBASE64ENCODEDDATAHERE]");