My first reaction on finding Font Squirrel's free @font-face kits was pure joy. Here were completely free fonts licensed for use on the web. You can embed these fonts into your site and it will show up in every major browser, including Internet Explorer 6.
What is @font-face?
For the uninitiated, @font-face is a property of CSS where you can embed a font into a webpage, which people have been trying to do properly since web design became mainstream. Before, we were limited to four or five fonts that are nearly universal to web users.
Paul Irish has the best syntactical method of embedding fonts, but Font Squirrel has actually done the work for you, supplying a stylesheet with both the IE-only and normal font files.
Putting it to the ClearType test, and Failing
I tried one of my favorite free fonts, Mido, on headings and my enthusiasm was demolished immediately. ClearType, which is enabled by default in IE7 and 8 (and Vista, and Win7), absolutely ruins the look of the font. IE6, surprisingly has the better showing. With ClearType on or off in Firefox, the font looks smashing.
This is one of those times I dread the fact that most of my employer's visitors use Internet Explorer 7 and 8.
Javascript? Flash? Anyone?
Still in gear for new web fonts, today I tried finding a suitable replacement, and came across Cufon, which displays custom fonts with Javascript. It sounded great, but the implementation is a bit clunky. The end result is a series of images, which is admittedly better than Flash (which makes scrolling difficult), but text can't be selected or resized. Unless you're using an HTML5 doctype, the line-height varies from browser to browser, which is fine for headings, but admittedly useless for body copy.
Some fonts look great across browsers
But perhaps it's Mido that needs some work. I tried Font Squirrel's Droid Sans kit, and everything has gone swimmingly. The type is clean and legible, and nearly identical in every browser I have (IE 6, 7, 8, Firefox 3 and Safari 4), with Cleartype on or off. The look surpasses Cufon by a mile.
Progress, not revolution
Assuming every font-face kit from Font-Squirrel was going to work perfectly was a bit foolish, but finding out which ones cooperate with ClearType is going to be a chore. We haven't knocked down the web fonts wall, but we're making our way over it.
Ben Hayes wrote:
November 2, 2009 at 7:11 pm | Link to this CommentThanks for pointing this out. Beautiful, I now have another font to use in body copy – Droid Sans!
I’ve used Cufon and it is technically pretty impressive but does have it’s issues, as you point out. I found that with Curon, occasionally the kerning went very strange with some letter combinations, for no apparent reason.
So how many good free fonts have you discovered that work with @font-face? Would be interested to see your list.
Tim Sookram wrote:
November 10, 2009 at 10:46 pm | Link to this CommentThe list is fairly short. Droid Sans, Droid Serif work well at any size. Gentium, Aurulent Sans, and a couple others work well as headings but don’t look good under 16px with XP’s Standard font smoothing.
Trisha wrote:
November 21, 2009 at 10:54 pm | Link to this CommentI had the same reaction. All those wonderful new fonts! I liked Cufon too, theres a wordpress plugin and it was so much easier than Sifr.
This seems to be the best solution!
im trying to match Myriad, WinterthurCondensed is about the closest. It renders funny MOST of the time, letters jumble – dont align at the baseline, but at 39px it MIGHT be doable. Youre right about IE… u.g.l.y…
I cant wait until there are more fonts in there. Clients wont be disappointed