Soon after launching of my latest redesign I’ve spent a great deal of time on the use of typography throughout the site. I’ve been teaching myself different font embedding technologies in order to use a specific font of my choice, rather then the standard web safe fonts you see everyday all over the web. In this article I’d like to share these methods and give my brief thoughts on each.
@Font-face
The @font-face rule will allow you to embed a font on your server, just as you would link to images within a stylesheet. The biggest problem with @font-face, besides the issue of browser compatibility, is that most font licenses do not allow you to serve the fonts over the web. Being a web designer and all, I felt achieving identical cross-platform appearance throughout my site was important, so I decided not to use this method and to try something else.
Web Fonts Embedding Support Matrix
Installation of @font-face
1. First you need to embed the font of your choice using the following CSS syntax:
@font-face {font-family: "Axel";src: url("font/Axel-Regular.ttf") format("TrueType");}
@font-face {font-family: "Axel";font-weight: bold;src: url("font/Axel-Bold.ttf") format("TrueType");}
@font-face {font-family: "AxelSC";src: url("font/AxelSC-Regular.ttf") format("TrueType");}
@font-face {font-family: "AxelSC";font-weight: bold;src: url("font/AxelSC-Bold.ttf") format("TrueType");}
2. Next you will reference the font to be used and declare the use of alternative fonts.
h1,h2,h3,h4,h5 {font-family: AxelSC,Georgia,Times,'Times New Roman',serif;font-weight: normal;color: #333;line-height: 22px;}
Following those small steps above you’re website’s headings (h1,h2,etc.) will all use the font specified and embedded on the server, regardless of the fonts installed on the users computer. Of course as I already mentioned this method just simply is not support by all browsers, so I decided to take a different approach.
Cufon
Cufon is basically a new and improved version of Typeface.js, with a focus on faster and easier implementation. Cufon loads very fast, since it is all JS and nothing more and the only real problem with it is that the font cannot be selected. Since I was only really interested in using rich typography on my headings and not the main content of my site, i decided this was the best solution for me. If you run a commercial website, I wouldn’t recommend using Cufon, since as far as I know it violates EULA and copyrights due the fonts being embedded.
Installation
Here is a very good tutorial on how to get Cufon installed on your site: http://net.tutsplus.com/videos/screencasts/the-easiest-way-to-use-any-font-you-wish/
Following the article above I was able to get Cufon up and running on my site within 30 minutes or so and am pleasantly surprised with it’s results on all platforms I’ve tested in.
Conclusion
Until recently, web designers were limited to working with the fonts of their end-users computer. Image replacement tricks and clever technologies such as sIFR have opened up new possibilities, but none of these are terribly easy to work with. We’ve recently made good progress in what is possible for type on the web because of the growing support for CSS 3′s @font-face property, as well as new technologies like Cufón and Typekit.