How to Use Any Font on the Web
As a designer, typography is a very important aspect to my work. Now as far as print design, implementing any form of type isn’t a problem, but when it comes to the web then there’s only a certain amount of fonts you can use, right? WRONG.
In the last couple of years, there has been some growth in using other typefaces on the web. CSS allows developers to use a property called @font-face to define a new typeface and these fonts are 100% SEO friendly. Some fonts can be purchased for embedding, however those license fees are usually out of reach for small companies or individuals – Greg Tarnoff. The issues surrounding @font-face are that downloading and sharing fonts via this attribute is breaking copyright laws.
With that in mind, the four methods that I am going to discuss are SIFR, FLIR, Cufon and Typeface.js.
- Accessible, selectable and most important cross browser compatible.
- Does not violate EULA or copyrights, since font is contained within the SWF object.
- You can easily add shadows and other text effects in Flash
- Flash plugin must be installed in the browser
- Cannot display on an iPhone. Yet…
- Does not violate EULA or copyrights, since font is rendered as an image
- Prints in the font rendered since it is an image
- Requires PHP with the GD enabled
- Text cannot be selected
Cufon is basically a new and improved version of Typeface.js, with a focus on faster and easier implementation and no Flash or images required.
- Do not need to load the Flash plugin which makes it fast, even for sufficiently large amounts of text
- work on every major browser
- close to zero configuration needed
- Not many fonts are permitted to be rendered with this method
- Inability to highlight and copy/paste text
Instead of creating images or using flash just to show your site’s graphic text in the font you want, you can use typeface.js and write in plain HTML and CSS, just as if your visitors had the font installed locally.
- User doesn’t have to have Flash plugin installed on their browser
- Recommended to use only for headlines because too much text will slow down page load
- Cannot be read by screen readers
- Not all browser compliant and still has a lot of development left to be done
Which method is better? All of them perform wonderfully for large header text but all are very different from one another. It is up to you as the developer to determine what is important to you… does it load fast, is it selectable, does it work in every browser?