Every medium has constraints. For print, there are things like size, ink density, and paper quality. For video, even the best available HDTV only musters up about 2.1 megapixel resolution (HD 1080p is 1920 pixels by 1080 pixels). On the Internet, those constraints can be things like bandwidth, screen size, or—today’s topic—fonts.
Every computer has some number of fonts installed. The most common of these are generally referred to as “web safe,” meaning you can be pretty sure that if you specify one of these common fonts in your CSS or HTML, the person who visits your page will see the font face you defined. But this can be limiting. What if you want a custom font that almost no one will have installed?
In this “Web Design Tips,” I am going to describe one possible way to do font replacement, and show you how to implement it with Cufón.
Video: Using the Cufón Font Replacement Solution
What is Cufón?
As complicated as this sounds, the conversion is automated, making it very easy.
Once converted, Kinnunen’s rendering engines display the VML glyphs (a pictorial form) on the page. While this is certainly an over simplification, you can think of Cufón as a tool that tells your web browser how to draw the characters of the font. Ultimately, Cufón allows a web designer to specify almost any font, allowing for a much broader range of design possibilities.
To use Cufón, you’ll need to take four quick and simple steps:
- Download cufon.yui.js from http://cufon.shoqolate.com and place it in your website’s file hierarchy.
- Convert your font at http://cufon.shoqolate.com/generate/ and place the converted font file in your website’s file hierarchy. (Be sure that you have a right to embed the font. Most fonts are licensed, you need to ensure that you have a license that permits you to embed.)
- Call the font and cofun.yui.js files into your page.
- Specify which page elements should have the converted font.