As regular readers of this blog know, I'm a typography aficionado. When I was working with start-ups a few years back, I was heavily pushing SIFR, the Flash-based headline replacement tool. But boy was that a pain in the butt to get working right. Then there was FaceLift, which did text replacement via image files. And then Typeface.js and Cufon, both of which used vector tools to literally draw the custom text letter by letter. In summary, web typography was a mess.
And now? Well, it's still a mess, but not quite as bad as it used to be. The latest versions of all popular browsers now support the @font-face declaration. No more hacks for rendering text in arbitrary fonts. The text is selectable and searchable. There is little (if any) performance hit, and the download hit is only the size of the font.
The biggest problem is browsers all support different formats. IE only supports the obscure EOT format. But give Microsoft credit. This was created over a decade ago, and works in practically any version of IE. Chrome and Safari support TTF and OTF, and Firefox is putting their weight behind yet another standard called WOFF. And still others can only work with SVG files (e.g. Mobile Safari). This is where I draw the line, though; The big 4 browsers are sufficient for me.
Thankfully, a really smart web developer named Paul Irish worked through all of this cross-browser crap, and came up with the optimal way to make @font-face declarations. The downside is you need at least 3 different formats for each font. Thankfully, the fine folks over at FontSquirrel have created this @font-face web tool to generate the different formats for you.
The other thing I learned the hard way: Firefox does not support cross-site font referencing. This is apparently to prevent font piracy, but it's a PITA when you have multiple domains that want to share font resources, or when you're trying to spruce up another site via GreaseMonkey. A simple way to get around this is to embed the font binary into the CSS code:@font-face {font-family:myCustomFont; src:url(data:font/ttf,base64,A6EA...);}
But even after all of that, I find that these fonts aren't rendered using proper anti-aliasing in all cases. It's very inconsistent, and makes using many fonts impossible. I'm hopeful these bugs will get fixed soon.
For more info, check out this slide deck.
pack my box with five dozen liquor jugs
Comments