Which Web Font Solution Should I Use?

None of the systems currently available to embed Web fonts are a perfect solution, but all of them are rapidly evolving. Many of the problems that I point out with the technologies presented in this book may well be resolved in the near future. Additionally, new technologies are coming online all of the time. A few important features—such as not hindering SEO performance and selectable text—are a given for all of these technologies, although they are relatively new capabilities in Cufón.

Before making a decision on which solution to use for your Web site, check the current condition of each of the Web services or Web embedding technologies, and then consider the following:

• Browser support: All of the technologies support the most recent Web browsers, although not all of them support older browsers. Fortunately, @font-face is supported by the majority of browsers currently in use. The Web font embedding technologies rely on Flash and JavaScript support, which, while seemingly ubiquitous, cannot always be assumed, especially in hand-held devices.

  According to TheCounter.com, in June 2009, 7% of browsers either lacked JavaScript support or had turned it off.

  
  

• Available fonts: The advantage of using @font-face or Web font embedding technologies is that you can use any TTF or OTF font available (although licensing should be considered). The Web font embedding services are limited to the fonts in their library.

• Speed: A primary consideration is how quickly the font will display on the screen. This is controlled by file size, server traffic, and rendering time. Consider these factors:

  • Web safe fonts are already on the end user’s machine, so speed is instantaneous.

  • Converting fonts to JavaScript may reduce file size, but will require more rendering time on the client side.

  • As font linking services become increasingly popular, it will be important to make sure they can handle increased traffic without slowing down.

• License: Each of the technologies has different licensing requirements for the fonts you want to use. The Web font embedding services provide licenses as a service, so no worries. The other methods, however, require you to have the correct license type to legally use the font.

  tech	browser support	#typefaces/file type	sub-setting	license required
  Web Safe	FF1, Sa1, Op3, IE3, GC.3	68[1]	NA	NA
  @font-face	FF3.5, Sa3.1, Op10	TTF or OTF	Yes[2]	Web linking
  @font-face	IE4	EOT	Yes[2]	Web linking
  @font-face	Sa3.1, Op10, GC.3	SVG	Yes[2]	Web linking
  @font-face	FF3.6	WOFF	Yes[2]	Web linking
  Typekit	IE4, FF3.5, Sa3.1, Op10	300+	Not yet	Provided
  Kernest	IE4, FF3.5, Sa3.1, Op10	600+	No	Provided
  Typotheque	IE4, FF3.5, Sa3.1, Op10	25+	Yes	Provided
  Cufón	JavaScript enabled	TTF or OTF	Yes	Web linking

  
  

  ^[1] Dependent on availability on end-user’s machine. 131 fonts on Windows. 125 fonts on Mac. 68-font overlap.

  ^[2] Only if processed through a service like Font Squirrel.

• CSS compatibility: @font-face and the Web font embedding services all work with CSS, but Web font embedding technologies require JavaScript to style the text. This can make it more difficult to style text, especially when using complex contextual styles or pseudo-classes.

• Local use: Can you use the font on your own computer to create graphic comps? If not, this might interfere with your workflow if you have to create very exact design specifications.

Type Inspirations: tap tap tap Tasty iPhone apps served with advanced Web type taptaptap.com Fronted by two-time Apple Design Award winner John Casasanta, tap tap tap makes some very cool iPhone applications. Their basic philosophy is, “Your tasks should be accomplished with just a few taps (hence the name ‘tap tap tap’).” Like the software they create, tap tap tap’s Web site is simple and efficient, but the design can also be scaled up for their About page or blog. [View full size image] How they do it: Tap tap tap uses Web font linking to download an OpenType version of the font Fertigo Pro, created by Jos Buivenga and available for free from exljbris.com. Fertigo is then used throughout the site as a signature typeface for everything except the tap tap tap logo. Even though the site only uses a single typeface, by mixing a variety of weights, colors, and sizes, they ensure that the typography never gets boring. [View full size image] [View full size image] [View full size image]