L Squared Design

...pursuing excellence in web design

Beautiful Typography with @font-face & Cufon

Jul 42009

While we are waiting for Typekit to arrive or Microsoft to provide an easier to use tool for creating EOT files, I thought I’d give Cufon a try. Obviously we are all hoping that font foundries will get on board and allow embedding, but in the mean time there is a selection of fonts that are either free or allow embedding. An extensive list can be found here , and examples of 10 great ones here .

After reading Cameron Moll’s Exploring Cufon and Kilian Valkof’s Combining Cufón And @Font-Face I got to work following Kilian’s tutorial. Getting @font-face to work was quite easy. Just add a declaration like this:

@font-face {
font-family: "Tallys";

I’m using Tallys by Jos Buivenga. Basically, the font-family declaration specifies that when you use “Tallys” in a font-family declaration later in your CSS, that you are referencing an embedded font. The src specifies where that file is found. Using local(’font-name’) first uses a local copy if the site visitor happens to have it installed. Normally you should use local() twice, once for the full name, and once for the PostScript name (for Mac OS X) as per this article . However, in this case the full name is the same as the PostScript name.

Once I did that, it worked great in Safari and Firefox. The only thing I needed to do was bump up the font-size, as Tallys is noticeably smaller than Georgia that I had been using.

Getting Cufon setup was almost as easy. Using the online generator was a piece of cake. I uploaded the created file and the main Cufon file, uploaded the jQuery fontavailable plugin. Then I called the fontavailable plugin, and activated Cufon for the selectors I was using, if the font was not already available locally or being embedded with @font-face. I had a couple of minor problems, first just minor errors in my code, then a hyphen wasn’t showing up for some reason. Never figured out why, I deleted it and used a comma instead, then noticed that there were other hyphens elsewhere that were working, so I put it back in. Once I added it back, it worked fine. Maybe it had been pasted in, and was a different character? One thing I learned though, was that if you are troubleshooting Cufon in Safari or Firefox, comment out the @font-face declaration, so you can see the problems without having to flip back to IE all the time.

Les Reynolds

| Categories: ,



© 2011 L Squared Design. All rights reserved. | 905.220.5534 | Valid XHTML | Built on Textpattern | Twitter