Web Font Replacement Frustration
January 10th, 2010
If you’re a web designer, and in particular, a print designer who has migrated to web design, you’re likely any or all of the following:
- accustomed to selecting & purchasing fonts based on client branding and application needs
- experienced with legally including/embedding necessary fonts with print-ready files to send to printer, sign fabricator, etc.
- sick to death of Arial and Times Roman, Helvetica and Georgia, or web safe fonts in general.
I understand.
The good news is that 2009 saw a virtual explosion of new methods to get other fonts on websites. Used to be, all you could do for special short bits of copy (like headlines and navigation) was to cut PSD files up and place as background images (JPG or PNG) into your CSS, hiding the ‘real’ HTML text with {text-indent: -9999px} (See this article on CSS tricks from 2008)
Then there were other options…Flash, FLIR, sIFR, Cufón, @font-face and more. This article has a great roundup, including links. Because every day last year, my inbox seemed to burst with new technologies to banish the banal—I was thrilled! And I experimented with several:
- trying to get away from Flash, I looked into sIFR
but never used it. - Cufón caught my attention for its simplicity so I put it to use in a WordPress blog.
Looking for Love
Everything was peachy with Cufón—until a WP update. I tried to fix the problems, but couldn’t get the fonts to work consistently across browsers in WP 2.8. So I stripped the Cufón and replaced it with @font-face. This seemed perfect—except that my first choice font didn’t work in IE—though another font did.Talk about progressive enhancement! IE gets the substitute font with @font-face. FF, Safari, Chrome, etc. get the top choice with @font-face. Plus I have a font-stack in CSS for back-up. (And each browser renders just a little bit different.)
Argh!
And then came Typekit…ahhh…love. True love, too—not just infatuation! Put my money down for a Portfolio account. Might even spring for the Performance account soon. It’s a beautiful thing. And their font selection is very, very good.
Yet, alas…My Love has Flaws
I’m now working on client site for whom I designed the logo, signage and collateral, purchasing new fonts with commercial license, for the brand. Sadly, these fonts are not (yet?) part of Typekit’s libarary. What to do?
- I cannot use @font-face because the EULAs do not allow redistribution—the fatal flaw of @font-face—anyone can copy/download the font from the server.
- I can use old fashioned image replacement, but that could be problematic over time, and won’t be dynamically generated as content is changed.
- I could use Cufón…but the EULA is grey, and vague.
Apparently, Vague Grey EULAs are the Norm.
Font foundries and distributors are having a hard time keeping up with web technologies. I wrote to MyFonts.com for help clarifying usage permission for the above-mentioned project. Specifically, I wanted to know if the commercial font license for Neubeau did or did not allow me to use Cufón. Remember, the EULA really wasn’t easy to understand. To view the license, click on commercial category.
Kudos to MyFonts for getting back to me on a weekend. But I was not impressed with their response. Here are some experts from MyFonts’ reply:
We recommend generating a graphic image for embedding to your website. Some
options you have available are Microsoft’s WEFT, which of course only works
for Windows IE users:
http://www.microsoft.com/typography/web/embedding/weft3/
Bitstream made a product called WebFont Maker which worked in IE and Netscape,
but they stopped producing that several years ago and I think
the browser support stops with Netscape 4.x
WEFT? Netscape? Huh???
To MyFonts’ credit, they did eventually offer other suggestions, like Flash and sIFR. But not until paragraph eight do they mention Cufón: “An alternate option would be Cufón:”
No…duh! Yet still, they didn’t say whether the EULA did or did not allow the use of Cufón!
And there’s the bad news: just because designers can, doesn’t mean we should, or that we’re, in fact, allowed to select and use fonts on the web based upon visual criteria. (You know, like for maintaining our clients’ brand!)
The EULAs are vague. The technology is exploding.
And designers are caught in the very grey, very murky, middle of the morass.
Postscript: March 2010
- I selected a combination of both Typekit (for body copy) and Cufon (for headlines & menus). See example >
- I did invest in full-blown Typekit performance subscription and am very pleased.
- I’ve set up a WordPress development site with dummy content plugin from which I can test-drive Typekit fonts and tweak my CSS/WP framework.
