Using any Font on your Website

typographyTypography in web design has come a long way since the <font> tag was first introduced back in 1995. There are many new ways emerging all the time to display non web safe fonts that will work in most popular browsers.

If you’ve been involved in developing a website in the past, or have had one built for you, you have probably heard of ‘Web Safe Fonts’. Web Safe Fonts are fonts likely to be present on a wide range of computer systems, (be it Mac or Windows etc). Microsoft’s core font list includes: Arial, Georgia, Times New Roman and Verdana. Or you can specify a font family, i.e. ‘sans-serif’, ‘serif’ or ‘cursive’, and the browser will search the computer for the most common font in that category to render your text.

Using Web Safe Fonts prevents the problems that might occur when you try to use your favourite ‘fancy’ font in your web design. It may work on your home computer, however as soon as you try to view it on a different computer you may find your ‘fancy’ font has been converted to something quite simple such as Arial. If your target audience don’t have the set fonts installed on their PC’s (and let’s be honest, if you’re anything like me you are a little font-download-crazy and you’re pretty sure nobody would be able to match your font collection anyhow) then they will be replaced with a ‘web safe font’, which probably wouldn’t look nearly as nice.

But even though always using Web Safe Fonts is ‘safe’, and ‘accessible’, sometimes you want to be able to design websites without limitations! Create masterpieces of typography!

Web designers have many ways of working around this font issue, the simplest being that we use graphics as a replacement for real text using the fonts that we want without needing to worry about what fonts the users have installed. However this can become time consuming if you need to change text later or is not really feasible if the web site is integrated into a Content Management System (CMS). Another option web designers have is to use Flash to display particular fonts in a static swf file but this also has the same setbacks as images.

Below I have listed a number of ways to bring some awesome fonts into your website:

SIFR (Scalable Inman Flash Replacement)

We have used SIFR on a number of websites, (e.g. “Perfect Espresso“ on their product pages to use their signature cursive font) and it works quite well. Also if you happen to use a Drupal or WordPress Content Management System there are plugins out there so you can easily install SIFR on them.

SIFR works by replacing your text with a flash file that renders in the font of your choice.

However now that so many internet users are browsing from their Apple iPhone or iPad, they won’t see the flash replacement text due to Apple’s no flash policy, instead they just see basic text. Another issue with SIFR is that it is notoriously difficult to set up (well for those who haven’t done it before, we’re pretty good at it!).

Cufon

Cufon is an alternative to SIFR that uses JavaScript & Canvas. It is much faster (partly due to the fact that the file size is 60-80 percent smaller than the original) and it’s selling point is that it uses a different rendering engine to Flash (allowing it to be viewed on gadgets like the iPhone and  iPad). It also claims to be much easier than SIFR to set up. There are also plugins available to install Cufon on the Drupal CMS to make it even simpler.

However Cufon does have it’s downsides, like SIFR the text is not selectable (not a good thing).  It is JavaScript dependent so if JavaScript is disabled, default fonts will be used. Also you cannot apply a hover state on links using Cufon.

Zendesk is an example of a website that uses Cufon effectively.

@font-face

@font-face is a form of font embedding. What this means is that you can upload the font of your choice to the web server and the font is called through the CSS. So anyone on any computer will be able to view your text rendered in the font from your server, no matter if they have that particular font installed or not. No boring web safe fonts here!

@font-face is supported by the latest versions of Safari, Firefox, Google Chrome and Internet Explorer. In fact Internet Explorer has supported @font-face since Version 4 using a proprietary font format (IE9 will be changing to WOFF instead).

The one problem with using @font-face is that you can’t upload just any font you want, licensing issues prevent that.

Fontsquirrel have a foundry full of FREE fonts available to use with @font-face. They let you download a kit which gives you all the files needed for each browser and there is also an option to upload your own fonts (if you have permission) and create @font-face font kits for them too. Font Stacks are another free @font-face font foundry.

And if you don’t like the look of any of the (many) free fonts there are many other sites where you can pay for the right font and use with @font-face e.g Font Spring.

Typekit is a subscription service which offers access to quality @font-face compatible fonts for a simple yearly fee.

Here is a handy table of Typekit fonts which compares which styles they all include (i.e. support for uppercase and lowercase, bold, italic etc)

WOFF (Web Open Font Format)

WOFF is actually not a way of embedding fonts but a new font format itself. This format is supported by Firefox (since version 3.6) and will be supported by the new Internet Explorer 9.

One of the benefits of using WOFF is that it allows for lossless compression, which means smaller file sizes without any affect to the rendering of the text.  It also allows for embedding of meta data, meaning that foundaries can include their font licensing information.

You can find free WOFF fonts to use in your designs at Fontsquirrel (or make your own) and use @font face to embed your WOFF fonts into your code.

The site Lost World’s Fairs showcases some awesome typography on sites using WOFF (make sure you view it in Firefox)

With all these options there really are no excuses to stick to web safe fonts anymore, so get out there and add some inspiring typography to your sites!

Comments

  1. Pingback: designfloat.com