Understanding and Using Web Fonts: Part 2

In a previous blog post on fonts we discussed why using web fonts is a good idea, now we’ll get into the different web font formats.

TRUETYPE

browser logosAs a scalable outline format, it replaced the common bitmap fonts that were used for screen display. It evolved into the standard format for system fonts because it offered a precise display of fonts in particular sizes.

OPENTYPE

Created by Microsoft and Adobe, based on the TrueType format, OpenType offers features such as ligatures, fractions or context sensitive glyphs. However, browser support still stinks. There are two different versions of OpenType fonts:

  • OpenType fonts with TrueType Outlines (OpenType TT)
  • OpenType fonts with PostScript Outlines (OpenType PS)

PostScript based formats are displayed without subpixel rendering on Windows platforms which makes it look pixelated and crappy. That’s why TrueType based fonts are the better choice as Web fonts. Browser support is available in Safari 3.1 and higher, Firefox 3.5 and Opera 10 (and of course newer versions).

EOT

Embedded OpenType (EOT) is a variation of the TrueType and OpenType formats that provide the following:

  • Compact which allow for quick delivery
  • Can be tied to a specific domain so they can only be used on those web pages. This helps prevent fonts from being copied and used without a licence.

EOT is only supported by Internet Explorer. Even though it won’t succeed in the future, we should use it now for users who use IE. Current IE versions (< 9) do not use any other format.


WOFF

Web Open Font Format (WOFF) is in the process of being standardized as a recommendation by the W3C. WOFF is a wrapper that contains TrueType and OpenType fonts.

The format has been supported by Firefox since version 3.6, and by Google Chrome since version 5.0. All other browser manufacturers are working on adding full support in future releases.


SVG

SVG fonts are basically text files that contain vector objects. The biggest disadvantage is that they are always uncompressed and usually pretty large. SVG is the only format that can be used for the iPhone and iPad prior to iOS 4.2.

Tools, such as Font Squirrel, can be used to convert fonts into this format.

Hang In There

It may seem like a pain to deal with all of the different font formats to ensure cross-browser compatibility. This problem will subside as soon as the Web Open Font Format (WOFF) is established as the standard web font format.

« Prev Article
Next Article »