Choosing the right font is key to any piece of graphic design, whether it be for web or print. Unfortunately web designers have been stuck with the same old system fonts for years, unable to create intricate typographical layouts without the use of images. I think we’ve done a pretty good job to be honest because any old-school print designers would have a heart attack if they knew we’ve been working with a choice of about six fonts to fulfil the needs of every website that we create.

There have been a number of different processes and applications written to try and solve this problem by allowing custom fonts to be embedded into websites. In this post we will outline the latest and most popular techniques, and the legal issues that you may unknowingly face by using them.

sIFR

Once the most popular, and of the first mainstream font replacement technologies that was developed, sIFR has been used on thousands of sites across the web. I’ve used it for a number of projects in the past, as I’m sure many of you have, and its been pretty successful.

It works by replacing your live text with a Flash .swf combined with Javascript and CSS. You simply embed the required font into a Flash movie and stick it in your HTML. sIFR text is selectable and works with all major browsers. The only main drawback is that as it requires Flash it won’t work on your “insert selected Apple products here”. No to worry though, if Flash or Javascript either isn’t available or is disabled then your website it will still fall back and display the standard system font set that’s defined in your CSS. One other little issue is that there is a short delay on the text appearing during the time that it takes for the Flash movies load. Flash renders fonts very nicely with good anti-aliasing, so for all those people not browsing the web on a Mac, your fonts will still look great.

There are ways to uncompile .swf files and extract fonts, but its not easy to do. Using Flash to embed fonts usually doesn’t violate EULA or copyright laws which many other techniques do. However, you must always check your font licence to ensure it allows embedding, and also with which technologies you are allowed to do so.

Cufón

Cufón was designed to do the same job as sIFR but be easier to implement. It embeds your font into a Javascript file which can be embedded into your website. It’s very easy to set up, too. You simply upload your fonts to the Cufón website and it generates a Javascript file that you include on your site.

Its advantages are that it only requires Javascript (rather than Javascript AND Flash) and the file sizes are small. Setting up is almost pain-free and doesn’t require you to purchase any software (such as Adobe Flash). It works in all major browsers but text is not selectable in all of them. However, there is a major issue with Cufón: you must ensure that the EULA for the fonts that you are using cover web embedding without Flash. Many free fonts do not allow this and it’s not always that obvious.

@font-face

Font-face is a CSS rule which enables the embedding of fonts into a website. It’s been supported in IE since version 5.5 - although IE does use a non standard font format, which means you’ll need to make a browser-specific font file (.eot). Still, it only requires CSS to work, has small file sizes, and text is selectable. But, and this is a BIG but, the fonts are simply included and linked to in the CSS, so they are not protected at all. You can therefore only use fonts with specific @font-face licences. Seeing as though they can be easily downloaded, @font-face licences normally only apply to free fonts. This is the main reason why this format has never been that popular, but it’s popularity is increasing and a number of different websites have set-up offering an ever expanding selection @font-face fonts.

Font squirrel is particularly great resource : http://www.fontsquirrel.com/fontface
(please comment below with any others).

There is also the issue of rendering. sIFR uses Flash so fonts are rendered really well whereas @font-face relies on the browser. On an older PC with anti-aliasing turned off, or on computers with older graphics cards fonts can appear jagged.

Typekit

Typekit is a subscription-based service for linking to fonts. It uses @font-face to embed fonts but Typekit hosts the fonts on their servers and uses JavaScript to protect them. You rent the fonts and pay a small fee to link to them. This allows Typekit to have greater control and security over the files.

Font files represent countless hours of finely detailed labor. Appropriately, type designers are concerned that they’ll lose control of all that hard work. - Typekit

Due to it’s security Typekit has the best collection of fonts. It contains free and paid for typefaces, and it’s simple to install. All you do is simply included the Javascript files in your header and then set up your kit on their website. You can read more on the usability of Typekit here: http://iloveusability.com/usability-review/typekit/

Overall my preferred method of font embedding is @font-face. There are thousands of free fonts available and many of them have the appropriate licenses. Many organisations already have brand guidelines in place though, and it’s not always possible to pick the right font with the correct lisence. If this is the case then I would use sIFR. Even though it’s more complicated to set-up and reliant on Flash, it avoids the legal issues of embedding fonts with Cufón.

Embedding fonts in websites will always be a challenge and there is only so much we can do to simplify the process. As multi-platform designers we can start to consider services such as Typekit when creating brand guidelines, and we also need to be sure that fonts are specified right at the start of a project so that the most appropriate solution can be decided upon. This may take a bit of time and thinking, but it’s definitely worth it in the long run.

Using custom fonts on websites greatly improves the aesthetics of a design without compromising performance. In the very near future I think that font embedding will become the norm and it will be interesting to see how it will progress from here.

By Chris Kemm