Fontastic Web Fonts
Ask any designer who makes the move from print to web and they will tell you about the huge limitations that the web still has when it comes to 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 ‘web-safe 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 when 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 within Internet Explorer 5. However, it relied on the .eot (Embedded Open Type) font format, which other browsers do not support. Meanwhile CSS3 allows @font-face to use TrueType (.ttf) or OpenType (.otf) – two common font formats – on 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 released in March both boast increased support with CSS3, so @font-face techniques can now be widely used as viewers update their browsers.