Using fonts on the web is a different proposition to using fonts in the print world. In print, you can guarantee it will look the same for everyone. With computers, operating systems install different fonts by default. A web page that looks great on a Windows computer might look very different on a Mac. As the web should ideally indifferent to what operating system or browser you have, a solution was required: web safe fonts (a list of which is available here).
Web safe fonts are fonts that are available on all Windows and Mac computers by default. These fonts enable you to design a page knowing that the page will look largely the same regardless of what type of computer your viewers are using. Knowledge of web safe fonts enables a designer to select a preferred font and select a number of backup fonts of similar appearance through CSS.
(If you’re not familiar with CSS, a helpful resource to start learning about CSS, HTML and more is W3Schools – http://w3schools.com/)
However, web safe fonts have a limited range and reduce a designer’s ability to make a site stand out visually through its typography.
CSS3 and @font-face – the future of web fonts
Techniques have been developed in recent years’ providing designers with more control over a site’s typography. While some techniques have involved using images in place of text or fiddly implementations of Flash (such as SIFR [http://novemberborn.net/sifr3]), an easier technique is the @font-face attribute in CSS3.
According to the W3C (http://www.w3.org/TR/css3-fonts/#the-font-face-rule) (the international organisation responsible for developing web standards), the @font-face rule “allows for linking to fonts that are automatically activated when needed”. You can now link directly to a font which will be displayed perfectly on your site regardless of what your readers have on their computers.
Browser compatibility
New problems are introduced by competing web browser rendering engines such as Internet Explorer, Gecko (Firefox) and WebKit (Chrome and Apple’s Safari). You need to ensure that the @font-face rule links to a number of different file formats to account for a consistent user experience across these different engines. While the soon-to-be-released Internet Explorer 9 will minimise the problem, there are still many older browsers in use that require support.
The different method required to implement web fonts makes hand-coded, built-from-scratch stylesheets awkward and time consuming (here’s a list (http://paulirish.com/2010/font-face-gotchas/) of most of the problems, compiled by a member of the Google Chrome development team).
You can avoid the hassle of cross-browser support by using a service like Font Squirrel (http://www.fontsquirrel.com). Font Squirrel has ready-to-download font packs with all the right file formats and a “@font-face generator” which will generate a font pack for you to download built from any font you upload to the site. Font Squirrel converts the font and generates a basic stylesheet to get you started.
If you are interested in the intricate details of the different file formats and the nitty gritty of implementing @font-face, two places to start are “How to use CSS @font-face” (http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/) and “Quick guide to implement web fonts via @font-face” (http://www.html5rocks.com/tutorials/webfonts/quick/).
Finding free web fonts
Just because you have a font available to use on your computer doesn’t necessarily mean you can use it as a web font. Many commercially available fonts require a separate licence for such use. While some services like Typekit (http://typekit.com) enable you to licence a number of fonts for a monthly fee, high quality and free-to-use fonts are also readily available.
The Google Font Directory at http://code.google.com/webfonts hosts a selection of open source and free to use fonts. The fonts are hosted on Google’s own servers so you don’t need to store them yourself. The Directory also includes handy code snippets and advice on the best ways to embed the fonts into your site
dafont.com (http://dafont.com) is a font directory that includes a number of public domain and free fonts. The quality of these fonts can be variable, but some good ones are available. You will find a selection of public domain and free fonts at dafont.com here)
