Implementing Custom Fonts on the Web

In the past year there has been major developments in rendering custom fonts in web browsers. Google has now released the Google font directory as another solution, which is bound to cause a major developments in custom web font rendering as the variety of solutions compete. This article explores the current solutions available for dynamic text replacement, discussing the current trends that designers are looking to.

sIFR (Scalable Inman Flash Replacement) first came available in 2005, was one of the first custom font rendering solutions. It uses JavaScript and Flash to convert text headings to any typeface and available as an open source license. sIFR relies heavily on the user having Flash and Javascript available, and with the rise in mobile browsers this isn’t always the case,  However degrading to show the original font.  Problems with implementation range from hoverable links and navigation, to accessibility issues and cross browser problems. However as developments have been made many have been addressed. Speed of loading is still an issue.

Typeface.js uses JavaScript custom font rendering method that embeds fonts into your page. One of the first usable solutions to need only Javascript, it had less drawbacks.  Problems of font copyright issues, means that open source fonts are regularly used opening up a new market for font development. Speed improvements are still needed for Internet Explorer.

Cufón consists of two individual parts – a font generator, which converts fonts to a proprietary format and a rendering engine written in JavaScript. In Many Cases this has become the alternative to sIFR, due to loading times, ease of set up and little configuration. Again, like Typeface.js it uses JavaScript and license issues prevent many fonts from being legally embedded. But the results are clear and good, with workarounds for Internet Explorer loading, and rendering position hacks it is producing good results as can be seen on this site in the heading fonts.

Typekit is a subscription-based service for linking to Open Type fonts supplied from type foundries. Pricing is from $25 per year, but offers thousands of fonts to be used. Working with a lot of the large font foundries means that they haves an amazing selection, with the benefit of support from a hosted solution, in depth tutorials, and a stable solution for cross browser problems.

Google Font API - Google’s solution is brand new, but early signs show that although they currently have a small selection of Open Type fonts, a form of paid service will mean that they would be competing with the Typekit if they weren’t partnered with them.

The issues surrounding fonts and the web are complicated and can be tricky to choose the best solution. Google will hopefully make this easier for developers to provide integrated typefaces solutions in their designs. Google api projects can spurn a great deal development from their active community, and hopefully will push competition to further solutions for the future.

Problems with Custom Fonts on the Web
Aspects to consider when deciding on a Custom Fonts on the Web solution

  • How well is it supported across all browsers
  • Problems, and workarounds.
  • Speed of loading
  • Font Licensing issues
  • Headings only

How to implement
Rather than writing in depth instructions on how to implement each of these solutions, below are some links to tutorials, and more information on each of the solutions: