In the meantime, quite a number of different web services have become available, making it possible to display different font types even in your browser. It's a feature web designers have been wishing for ever since.

It was only possible to use some default fonts (Arial, Helvetica, Verdana, Courier) in the past – and not even then you could be sure which font type visitors were displayed. By now, displaying the most extravagant font types on the World Wide Web is no longer a problem.

Font types for websites – what is already possible and how do solutions differ from one another?

In the meantime, quite a number of different web services have become available, making it possible to display different font types even in your browser. It's a feature web designers have been wishing for ever since, as it was only possible to use some default fonts (Arial, Helvetica, Verdana, Courier) in the past – and not even then you could be sure which font type visitors were displayed. By now, displaying the most extravagant font types on the World Wide Web is no longer a problem.

History

At the beginning, web designers helped themselves by using image-replacement techniques like for example sIFR and cufón, which were quite popular at first. However, they turned out to be mostly inapplicable and hard to operate for users in most cases, so many designers decided against their further use.

New CSS3 concepts of integrating font types via @font-face rule stirred up the debate. Almost instantly, browser suppliers got interested. Mozilla Firefox as well as Safari and Chrome mother WebKit quickly picked up this new CSS3 possibility, albeit not without various technical teething troubles. As usual some producers like Microsoft (Internet Explorer) refused to join in the process and problems with font files, licencing them and building a common standard remained. For further details, see Gerit van Aaken's presentation, dealing separately with this topic.

The agony of choice 

The past year has brought a fast increase in services available. The following sections will give you and overview of the biggest 5 and their individual differences.

typekit.com

Typekit probably is the most popular service, offering a wide range of type fonts and possibilities. However, it is not for free. In order to get full access to all functions, users have to pay $24,95/year. An optional free account does exist, but it contains branding and is considerably restricted as well. Low level plans are quite limited, so you can only use 1-2 domains and 2/5 type fonts. Traffic is not charged according to memory but to the number of visitors and provides sufficient space even if you only use the beginner's account. The “portfolio” plan, which costs $49,99/year, leaves little to be desired, the only restriction being only 500.000 pageviews/month.

The service offers more than 500 font families which can be looked through and tested in the backend. The possibility to place font types one below the other improves comparability. Depending on your preferred way to write codes, you have the choice between assigning to CSS classes and designing directly in the backend or working in the CSS file as before. For every font type, you only get the set typeface, saving traffic and shortening loading time. Furthermore, it is possible to insert fallbacks for browsers which are not compatible with the @font-face rule.

Typekit uses Javascript to load font-data. 

Google Font Directory /API

For some time now, Google has been offering a free service, giving web designers the opportunity to insert font types via CSS or Javascript into their websites.

The selection of fonts is still very limited (status 9/2010) and presently offers 19 different font types, some of them containing different typefaces. The easy-to-use service, which requires no registration, provides a preview function, the already-mentioned typefaces and a code making fast and easy embedding of chosen fonts possible. The necessary typefaces can be selected or deselected as desired. By default, a HTML-CSS code is provided, but it is also possible to switch to a version for “advanced users”, which allows different variations via Javascript and the so-called “Web Font Loader”. Furthermore, font types can be downloaded.

Google Fonts together with Typekit (cooperating with Google Fonts) probably offers one of the best solutions among all solutions possible – due to the existing Google Code infrastructure, that is not very surprising. The service is compatible with Internet Explorer version 6 or later, Firefox (version 3.5 onward), Opera (version 10.5 onward), Safari (version 3.1 onward) as well as Chrome (version 4.25 onward), but unfortunately not with iPhone, iPad and Android. Due to OpenSource licences by Google, designers don’t have to worry about violating rights at all.

Summing up, this service is especially suitable for designers who prefer a simple and ultra flexible service and who are satisfied with only a small selection of font types.

 

WebINK.com

WebINK was only started in August 2010 and is still in its infancy. Extensis, the company distributing the product, is known for its font management system Suitcase. This service is slightly cheaper and can already be used for $0.99/month (about $12/year), however there is no free plan. Every Plan is restricted to only 3 domains (including an unlimited number of subdomains), which is, in my opinion, too restrictive for monthly fees up to $19,99. Apparently, on this point developers are still a little inflexible or overanxious towards the Web.

Designers can choose between more than 1000 different font types, all of them being verified and of excellent quality and leaving only little to be desired. However, this selection is restricted according to the chosen plan, as well as bandwidth, which is generously sized though.

In the backend of the software, you search the library, choose a font type and insert it into your website. It’s a simple system that’s fun, too.

All font types are inserted via @font-face rule. With a specifically generated authentication code the WebINK is linked to as source. The rest, like e.g. fontstyle, is done by their server. However, the interleaved way of calling up DNS is quite impractical. Apart from that, WebINK.com seems to be a viable solution. The service is compatible with Internet Explorer version 4.0 or later, Firefox (version 3.5 onward), Chrome (version 4.0 onward). Opera is not mentioned, but it should work with version 9.5 or later. Licencing of font types as well as legal matters is taken into their own hands by the provider, of course.

From a technical point of view, font types are stored on Amazon S3, known for its good performance and reliability. Due to compression of data, bandwidth is saved and loading time shortened remarkably, which comes in quite handy when dealing with font types comprising several megabytes.

 

Technical problems

From a technical point of view, there are only two ways of inserting font data: via Javascript or via CSS. The latter method is to be preferred as it covers every user’s specific requirements and has a better performance as well.

Both solutions suffer from the same problem – data is only linked while actually being stored on servers belonging to providers somewhere in the Cloud. Problems with performance tend to turn up once in a while as designers and users are dependent of the servers working reliably. Particularly with small providers errors are often the case. Google presents quite a good performance concerning server performance and complex infrastructure. However, an additional DNS query is necessary, which has a negative effect on the entire performance of your website. Nowadays, this might even be reflected in Google’s search ranking, a controversy that cannot be avoided.

What does the future hold in store?

Well, no one can really see into the future, but let's hope that browser suppliers will find a better and more uniform way of dealing with font rendering. Furthermore, font distributors like Monotype Imaging and co should think about a concept for their font files which prevents licence problems and simplifies work for web designers (also from a legal point of view).

It's good to know that people are already partially aware of the problem and try to come up with solutions, but still these solutions do not meet the requirements of the W3C Working Draft for the use of font types on the Internet. The technical possibilities they offer are limited and services residing in the cloud form the only base, which is not always an advantage.