[Editors note: Check-out my other post for @font-face development details.]
For YEARS we’ve been wanting to use @font-face to give us more than the, what, 6-7? web-safe fonts that we can comfortably use cross-browser…
And while many prefer to bash MS for continuing block progress on this front, they are actually the ones that got things started, back with their proprietary EOT format in IE4! And yes, while they do continue to block the use of TTF, requiring fonts to be converted into EOT, their claim is true: distributing font files across the web makes those font files ripe for pirating. I personally don’t believe MS really cares that much about the font foundries, I think they are probably more concerned about themselves being sued for allowing fonts to be “insecurely distributed” around the world. But I still cannot argue with the reality of their claim.
So historically, developers have had three options:
- try to convince design to settle for something like Arial or Times,
- create a crap-load of graphic headers, or
- use sIFR…
Graphic headers suck because, well, they’re graphics, which means developers have to create and maintain them (updating them every time edit wants to change verbiage), users have to download them, and they’re next-to-impossible to use for dynamically-generated content. And don’t get me started on the Accessibility issues of various graphic header implementations…
And while sIFR certainly doesn’t suck (at least it is a dynamic alternative), it certainly isn’t perfect: you have to have JS accessible and enabled; each replacement is another dynamically-generated SWF (okay, now sIFR is starting to suck… system resources!); and, although they would be hard to find, the font files still have to be on your web server some where…
Recently, there was fourth option to appear on the horizon, cufón, which uses the <canvas> element, but still requires JS and still exposes the fonts…
So what has changed that allows me to write this now? Well, for one thing, @font-face has been re-instated in CSS3, and so modern browsers are now suddenly implementing it, which means we can actually start using it!
Another thing has been an explosion of web fonts being made available, most notably the list of free web fonts! Below is a actually a short list of sites that I’ve collected during my research into standard. Have a look, I think you’ll be surprised at some of the high-quality fonts, I know I was! But please, please read the font licenses and stick to them! If the license “says for non-commercial use only”, don’t use it on your commercial site. If the license says “not for use on sites with more than 100,000 unique page loads per month”, don’t use that font if you just might surpass that limit. In order to continue benefiting from the hard-work of font creators, for free, we need to adhere to their rules.
Okay, enough preaching, go fall in love with web fonts!!
Happy fonting,
Atg
A brief list of free fonts from around the web, in alphabetical order:
http://abduzeedo.com/big-fonts-web-design
http://designm.ag/resources/calligraphy-fonts/
http://dzineblog.com/2009/08/15-extremely-cool-web-20-fonts.html
http://fonts.philip.html5.org/
http://nicewebtype.com/fonts/
http://openfontlibrary.fontly.org/
http://opentype.info/demo/webfontdemo.html
http://webdesignledger.com/freebies/20-dingbat-fonts-that-are-actually-useful (scroll down for additional fonts)
http://webfonts.info/wiki/index.php?title=Fonts_available_for_%40font-face_embedding
http://www.1stwebdesigner.com/resources/65-popular-and-professional-free-fonts-for-creative-typography/
http://www.fontsquirrel.com/fontface
http://www.instantshift.com/2009/07/05/40-fresh-free-fonts-to-enhance-your-designs/
http://www.instantshift.com/2009/07/26/35-high-quality-free-fonts-for-your-designs/ (scroll down for additional fonts)
http://www.pvmgarage.com/en/2009/07/25-free-blocky-fonts-ideal-for-logo-and-poster-design/
http://www.sitepoint.com/blogs/2009/04/24/30-sites-for-fantastic-free-fonts/
http://www.smashingmagazine.com/2007/11/08/40-excellent-freefonts-for-professional-design/
http://www.tripwiremagazine.com/design/design/25-high-quality-free-fonts-for-professional-design.html
http://www.tripwiremagazine.com/design/design/35-really-awesome-free-grunge-fonts-with-inspirational-showcases.html
http://www.unionroom.com/blog/7-new-free-fonts-that-you-should-definitely-download/