New Toy in the Box

Typography has been a thorn in web designers’ sides for a long time. There are thousands of beautiful fonts in the world but only a dozen or so are available on most computers.

The Original

Enter the CSS font stack. Using font-family you can specify several fonts in order so that if the user’s computer doesn’t have the first, it checks for the second and so forth. But designers have always wanted more control and variety for their projects.

Workarounds

computer keyboard
There are a couple of ways this has been handled. The first is using images for the text. The problem with this is that is takes the pages a lot longer to download. It also makes it impossible for people with disabilities like blindness to use the website.
Another work-around is a javascript, flash combo like sIFR or cufón. The first can be tricky to set up and requires the browser to have flash installed. The second only uses a font converter and javascript but results in text that can’t be selected or copied.

The New Toy

The lowest learning curve solution and the one that doesn’t require dealing with scripts is @font-face. You load the fonts on your server and link them in your style sheet. Then you can use them as normal. To give the developers credit, this has been available in Internet Explorer for years but it’s only been available in the other two most popular browsers (Firefox and Safari) in the most recent releases.
The next stumbling block is licensing. Very few fonts have been released with licenses that allow online use (font foundries are working on this).
Font Squirrel logo
Font Squirrel has @font-face Kits.  You browse through a list of freely available type families with web licensing and download a kit with the fonts in regular and IE’s proprietary format. You also get a copy of the license and a CSS file with the rules needed to include the fonts in your website.
I’m using Medio for the body copy and Caviar Dreams for the headings and navigation on this site. Just load the fonts on your website, include the rules in your CSS and use them in your font stacks as normal. If you want a to use a free font not available on Font Squirrel and you have a PC, Microsoft has a free application called WEFT to create an eot file from the regular files. Just double check the license. We want font makers to stay comfortable letting their creations be used.

Share this post

Laura specializes in small businesses and non-profits, working one on one, giving them websites to help them fulfill their dreams.

Comments are closed.

Search

Socialize With Me