Our Blog
Buh-bye Arial, So Long Verdana, Hello @font-face
The @font-face rule allows authors to specify online fonts to display text on their pages. In other words, you’ll be able to use fonts outside the usual Arial, Verdana, Georgia and the like, even if the end user doesn’t have them resident.
There are a few other things worth mentioning. The rules are unique to CSS3, so only a few of the newest browsers support them. The fonts you use must be made public, so if you use the rule you’re essentially distributing the fonts – not cool. That’s its biggest hurdle right now and may in fact lead to its demise unless someone can figure out how to protect the fonts. I’m not convinced services like “Typekit”:http://typekit.com/ are the answer.
Originally, we had designed a page using some recently purchased “H+FJ”:http://www.typography.com fonts but quickly realized we couldn’t use the layout without distributing the fonts. Don’t hate the playa, hate the game.
Before you go clicking you’ll need a really modern browser. “Firefox”:http://www.mozilla.com/en-US/ works best, not only in the way it renders the actual type but also the way it displays letter spacing. The new “Safari”:http://www.apple.com/safari/ and the “Opera beta”:http://www.opera.com/browser/next/ browsers will also render it decently. We could have made the page degrade gracefully for older browsers, but we didn’t. While you can still view the page in older browsers it’s gonna look like it’s 1999.
Update: It seems as though Firefox 3.5 for Vista doesn’t render a few of the fonts well or at all.
“view the sample page”:http://www.teehanlax.com/labs/projects/fontface/
Okay, so we won’t be using it anytime soon due to the issues stated above, but it sure does look promising. There’s a good post at “craigmod”:http://craigmod.com/journal/font-face/ on this subject too if you want to learn a bit more.
That sample page is TIGHT. Bring it.
[…] Jul 16 RT @teehanlax: Buh-bye Arial, So Long Verdana, Hello Font-Face. A quick test using the new CSS3 rule http://www.teehanlax.com/blog/?p=1689 […]
wow – this changes everything! Hopefully there will be a bunch of open source fonts released to fix the distribution issue.
Good to know this is on the horizon. It appears to also work with IE8.
Thanks for the sample – I ran into the FF3.5 Vista problem too…. I wonder if it’s the same for FF3.5 on Win7.
When I first read about the tag, I thought people were trying ot make some sort of open font standard…or at least get it more widely used?
@font-face has the potential to change the way the web looks, assuming that the licensing issues get sorted out. From what I’m reading, there seem to be lots of very smart people working very hard to arrive at a solution.
In the mean time, there are free fonts that allow embedding, and adding Cufon into the mix allows users running IE to have nice fonts as well. That is what I’ve done on my new site.
I detailed the process on my blog (which isn’t ready yet, but I’ll make an exception since it is relevant) Beautiful Typography with @font-face & Cufon.
The future is exciting!
Do you find the file size of font files a concern for lean web design when it comes to production sties?
Your sample page had 174kB of font files. Obviously you used more fonts than you might choose for a production site.
I wonder if browsers would accept compressed (gzip) font files if sent with the appropriate header?
Looks beautiful in Safari. Chunkfive is not displaying in Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1.2) Gecko/20090729 Firefox/3.5.2. Everything else seems to be in place. Just thought I’d let you know.
Cufon has the same licensing issues as above, try open source fonts like front OpenOffice.org ..those should be freely distributable.
Their are really good @font-face font’s on http://www.fontsquirrel.com/ which are 100% free for commercial use. You can also get @font-face to work with almost every browser including IE6+ following Snook’s great guide here: http://snook.ca/archives/html_and_css/becoming-a-font-embedding-master
My blog has extensive @font-face usage as well as more CSS3 goodness. Click my name only if you are using a modern browser which basically means not IE.