Ask any designer who makes the move from print to web and they will tell you the huge limitations that the web still has for text and fonts. One of the most common problems has been that any visitor to a website requires a font installed on their machine for the text to be displayed. Designers have typically been ‘constrained’ to a small number of ‘safe web fonts’, such as Arial, Times New Roman and Verdana.
There are many options available that are used as workarounds, with the main four being;
The traditional and most commonly used method today, is replacing text with images to create the desired effect. It is simple to just whip open Photoshop, change the text and save it out as a .jpeg, .gif or .png. This is search engine friendly, relatively easy to do and, if done properly (such as using CSS sprites), quick to load.
Text images are more than adequate for static pages, but once dynamic text is required (such as on websites with databases), it becomes impossible to manage. There are various options available which try to tackle this problem, with the ‘sIFR’, ‘Cufon’ and ‘@font-face’ techniques being the most common.
Despite several updates throughout the years, most people have moved on to either Cufon, TypeFace or @font-face.
Cufon / TypeFace
The ‘@font-face’ has technically been around for a while – first implemented in in Internet Explorer since IE5. However it relied on the .eot (Embedded Open Type) font format, which other browsers don’t use. Meanwhile CSS3 allows @font-face to use TrueType (.ttf) or OpenType (.otf) – two common font formats – in the web.
When using the ‘@font-face’ technique, a visitor will download the font, which the page then uses to render the text. Provided the font’s owners allow its download, @font-face also relieves the number of server requests significantly.
Firefox 4 and Internet Explorer 9 release in March boast increased support with CSS3, so @font-face techniques can now be widely used as viewers update their browsers.