Before web fonts were available, designers were restricted to a small selection of fonts available on both Mac and PC known as ‘web safe fonts’. These fonts gave consistency to websites across different computers, but were more than a little restrictive. These fonts included the following – some of which I’m sure you will have heard of:

  • Arial
  • Verdana
  • Impact
  • Palatino
  • Tahoma
  • Trebuchet
  • Times New Roman
  • Georgia
  • Courier
  • Comic Sans (Arrrghhh please, not again!)

This is only 10 fonts, comprising of 3 serif fonts, 5 sans serif fonts, 1 handscript font and 1 monospaced slab serif (please see the section at the end of this article for more explanation about these terms). See what I mean by restrictive?

So, why were the fonts so limited? The reason for this is that the fonts used on the website for live text had to be available on the user’s computer. As well as the limited set mentioned above, some other fonts are available on some Macs and PCs, which gave a little more choice, however we had to provide a fall-back font in case the user was on a machine that did not have the font we wanted them to see. This was done through a ‘font stack’ which basically is a simple line of code which says that if the font you want is not available on the computer, use a second choice font, then a third choice and so on and so on. This gave us a little more choice.

And if we wanted to use other fonts that were not web safe, then we had to use graphics of the fonts or some kind of font replacement like Cufon or sIFR to display the font as we wanted it to be seen, all of which are not ideal. For example, the problem with graphics is that they are difficult to change, rubbish for search engine optimisation and take up a lot of memory so slow down the page. Also they are also not scalable so if you zoom in on the page they go fuzzy. The problem with font replacement is that they require javascript or Flash so do not always work, especially on older browsers, iPads and iPhones, as well as there being other issues like text not being selectable and adding to the time taken for page load.

So, what do we do?

Well, even these web safe fonts are now no longer safe, as anything running on Android (Google’s mobile platform) does not have access to these fonts. This means the font will be replaced, giving a different visual experience to users viewing the site on mobile devices or tablets, to those viewing on a desktop computer. And as the latest stats show Android making up 22% of the smartphone operating systems in the UK in early 2013 and a massive 69% across Europe and china, this is a lot of people getting a different visual experience (Source: Canalys February 2013).

@font-face web fonts

The good news is that the rules have changed - we now have ‘@font-face web fonts’ which has opened up a whole new world of font choice to us designers.

@font-face is not a new thing - it was introduced in the late 90's and is available as far back as Internet Explorer 5. However due to a myriad of technical and legal issues it was not available across all major web browsers until 2011. Now, 99% of modern web browsers support @font face. What this means is that we no longer have to choose fonts that are on the user’s machine, as the @font-face code tells the web browser where the font is. This allows designers and developers to choose from thousands of fonts for dynamic, search engine friendly, editable text as opposed to the 10 web safe fonts that were available previously.

Web font can now be self-hosted legally as a WOFF (Web Open Font Format) with your website, just like images are, or you can call them from a specialist third party font service. The main third party web font services are Typekit, Google fonts, Fonts.com, Fontdeck, Fontspring, web ink, Kernest and Webtype.

Typekit is one of most widely used services, with over 4,000 fonts on an annual subscription basis. Here at Blueleaf, we find it easy to integrate and upgrade, with a great range of high quality fonts. As well as the third party web font services, we also buy fonts for self- hosting or use some of the free font services available like Google fonts or Font squirrel. Google fonts is free and offers both self-hosting and hosted options, but does not in my opinion have as much choice as the third party services. Another free option is Font Squirrel, which offers a selection of high quality free fonts for self-hosting.

Buying fonts rather than using third party font services has the advantage of a one-off fee as opposed to a monthly or annual subscription, but has the disadvantage of not having the support that the third party providers give you to take care of any cross browser issues and bugs that can occur. It is worth mentioning that if you have purchased a font for your company, it does not necessarily mean you can use it on your website as most font licences only cover desktop use – something worth checking out.

Deciding whether to self-host our fonts or whether to use a third party web font service and if so which one, depends on several things – these include the font’s licence, the cost and where and how the font we want is available. Basically it boils down to what the client’s needs are at the end of the day.

As a designer, web fonts mean I can match my client’s fonts across offline and online marketing materials without having to compromise by using text as images or font replacement. It also means I can choose whichever font I want for changeable dynamic content and it will look pretty much the same on different browsers, operating systems and devices. I say pretty much as different browsers render fonts slightly differently on different devices, but that is a problem that web safe fonts also had.

Basically, web fonts through the ‘@font-face’ tag has given web designers and developers the typographic choice and control that we have been missing. As a lover of all things typographic, having the choice of thousands of fonts as opposed to just 10 is amazing. I believe it is something that can only help to make the web a better place for us all.

Useful terms

I'm an overly technical person and after years of glazed looks, I realise that terms I take for granted are not always familiar to everyone. So I have pulled together a quick list of useful terms - feel free to ignore this if it’s teaching you to suck eggs.

  • Browsers - the applications that you go online with, like Internet Explorer, Chrome, Firefox or Safari
  • Operating systems (OS) - the software your device runs on, normally Windows, Mac OS or Android
  • Devices - the desktop computer, laptop, tablet, smartphone, console or web-enabled TV you are using
  • Font stack - a list of fall back fonts for your website
  • Javascript - a programming language
  • @font face - a CSS rule that defines the fonts to appear on your webpage
  • CSS - Cascading Style Sheet, which defines the look and formatting of a webpage
  • Page load - the amount of data required to download to view the page
  • Flash - a multimedia technology for animation and interaction on website; this is not supported on iPads or iPhones
  • WOFF - Web Open Font Format; a wrapper that contains a font to allow it to work on webpages
  • Render - how the browser displays the font on screen
  • Cufon - a font replacement javascript script, that allows fonts to be shown on the webpage, that are not web safe
  • sIFR - a font replacement code using flash and javascript, that allows fonts to be shown on the webpage, that are not web safe
  • Serif fonts - serifs are the small details that are at the end of the strokes, like the feet on Times New Roman .
  • Sans serif fonts - fonts without serifs; sans coming from the french word for without
  • Monospaced slab serif - this looks like the letters off a typewriter
  • Hand script font - a font that looks like it is hand drawn
  • Sucking eggs - Telling people stuff they already know (and probably more about than the first person)
  • Wow this list could go on for ever
  • Wow - an expression of surprise…

Written by Duncan Watts

Comment