News, Tweets & Thoughts
Blog | Top Tips

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;

Cufon / Typeface

Fontastic Web Fonts

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.

Appearing in 2005, sIFR (Scalable Inman Flash Replacement) is a way of using Flash and Javascript to replace text elements on the page with Flash equivalents. It was expected to take off – but didn’t, due to its requirements of Javascript and Flash. In addition to notoriously slow rendering, sIFR also had problems displaying hyperlinks.

Despite several updates throughout the years, most people have moved on to either Cufon, TypeFace or @font-face.

Cufon / TypeFace
Cufon and Typeface are similar but try to make up for sIFR’s shortcomings. Both work by converting a regular font file into a Javascript file, which then displays text on your page and loads faster than sIFR because they don’t require Flash.

Cufon, however, can cause confusion if a user tries to select the text. Additionally, like sIFR, users won’t see the expected text when Javascript is disabled.

These are not web-safe fonts

CSS3 provides many new and exciting ways to do things, one of which is the @font-face technique.

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.

More of our work


E-Commerce / Web Development / WordPress

Sort Your Future

UX & Web Design / Web Development


Web Development / WordPress