You may have already read our articles on typography and fonts, and also be aware that the web was not created with much thought for design, layout and typography.

Because the vast majority of web sites reply on end user installed system fonts to display text (which is search engine friendly) in web pages, and these fonts cannot be easily moved from one computer to another because of license issues, web designers have long had to put up with only specifying fonts which they can reasonably expect to be installed on an end-users system.

Typically this has meant specifying fonts from a conservative list of "web safe" font lists (or "families").

Web fonts from 3rd party font web sites

Several font foundries and business offer online licensed fonts for web designers to employ to style html text. The fonts are loaded into an end-users RAM from the server where the fonts are stored when required. Fonts do not need to be stored/installed on the end-users or developers computers.

A web designer adds (CSS) code (@font-face etc) to a web page and style sheet which when called will "import" (download) a font (into RAM).

• eg ... link href='http://fonts.googleapis.com/css?family=Cantarell&subset=latin' rel='stylesheet' type='text/css'

Obviously this has the potential to revolutionise web typography but the licensing and differing browser font technology support issues are still to be resolved.

Here are a few sites you can try. Be sure to test on Macs and PCs and as many browser versions as you can.

• www.fontsquirrel.com/
• typekit.com
• code.google.com/webfonts

The pros and cons are shown below.

Methods - pros and cons

The following table shows the current primary methods for using typography on web pages with their attendant pros and cons.

Method	Pros	Cons
End user system installed fonts	Predictable results. You can specify a list of alternatives. Google / search engine friendly. Ideal for content management systems where amounts of text are unpredictable. Searchable.	Limited choice. Limited typographical control (no kerning, stretching etc).
Images	Limitless styling potential.	You will need to configure alt tags which are not as search engine friendly as text tags. Time consuming to edit. Longer to download (especially for mobile devices).
Embed	Predictable results. Limitless styling potential.	Only works for plug-in formats such as Shockwave, PDF and Flash.
Web fonts from a 3rd party site using @font-face	Most of the advantages of end user system installed fonts. Potential to use any font.	Partly due to licensing issues, browsers differ in the font technologies they support. Limited support on mobile devices. Slows page loading. No comprehensive/universal single font site resource, you may need to license fonts from several services. Cost.

 

Our current (Oct 2010) recommendations

Until you can be sure your end users have browsers which support the web font technology you wish to use, stick to marking up text with end-user system installed fonts. Avoid styled text in images for search and navigation elements.