Various web font techniques

Cool fonts are everywhere: magazines, billboards, clothing, product labels, tattoos... you get the picture. Surprisingly, the Internet itself (with all its awesome power and technical advancement) is practically devoid of typography. For example, the only fonts you can be almost absolutely certain to exist on Windows, Mac, and Linux machines are:

• Helvetica (some operating systems substitute Arial)
• Courier
• Times

Since many Linux users also install the ttf-mscorefonts / msttcorefonts package, you have a moderate assurance these fonts are available as well:

• Arial Black
• Comic Sans MS
• Georgia
• Impact
• Trebuchet MS
• Verdana
• Webdings (no Unicode characters)
  

So there you have it, of the millions of fonts in existence, Internet users can enjoy a grand total of ten (this is where you start to cry and take anti-depressant medication). Fortunately, creative human beings have ventured to resist this limitation by proposing alternatives. Each option has its own pros and cons as described below:

Embedded OpenType (EOT)

• Date announced: September 1997 (IE 4.0)
  
• Brief description: Proprietary font standard supported exclusively by Internet Explorer
  
• Dependencies:
  
• Difficulty to set up: Easy
  
• TTF font converter: eotfast

Scalable Inman Flash Replacement (sIFR)

• Date announced: April 2005
  
• Brief description: Uses Adobe Flash to render font
  
• Dependencies: JavaScript, Flash
  
• Difficulty to set up: Hard
  
• TTF font converter: sIFR Generator
  

GFX Text

• Date announced: August 2007
  
• Brief description: Uses VML TextPath element and SVG Text element to display text (supports CSS styling so can be combined with EOT, WOFF, or Google Web Fonts)
  
• Dependencies: JavaScript
  
• Difficulty to set up: Medium
  
• TTF font converter:
  

Cufón

• Date announced: June 2008
  
• Brief description: Uses VML and Canvas to draw text as vector paths
  
• Dependencies: JavaScript
  
• Difficulty to set up: Medium
  
• TTF font converter: shoqolate.com
  

Facelift Image Replacement (FLIR)

• Date announced: August 2008
  
• Brief description: Sends text to server-side PHP/GD to render as image
  
• Dependencies: JavaScript, PHP, GD
  
• Difficulty to set up: Hard
  
• TTF font converter:
  

GFX VectorText

• Date announced: September 2008
  
• Brief description: Uses VML and SVG to draw text as vector paths
  
• Dependencies: JavaScript
  
• Difficulty to set up: Hard
  
• TTF font converter: ttf2svg
  

Web Open Font Format (WOFF)

• Date announced: October 2009
  
• Brief description: W3C standard (working draft) for web fonts
  
• Dependencies:
  
• Difficulty to set up: Easy
  
• TTF font converter: @font-face Generator
  

Google Web Fonts

• Date announced: May 2010
  
• Brief description: Dynamically serves EOT fonts for IE and WOFF fonts for other browsers (open font license)
  
• Dependencies: optional JavaScript WebFont Loader
  
• Difficulty to set up: Easy
  
• TTF font converter:
  

---

	EOT	sIFR	GFX Text	Cufón	FLIR	GFX VectorText	WOFF	Google Web Fonts
Cross-browser (IE, Firefox, Chrome, Safari, and Opera)			1
Avoids legal EULA complications
A11y (visual impaired accessible) / SEO friendly
Font is compressed
Avoids FOUT issue							2	2
Can change text size without page reload

Notes:

1. VML does not support EOT fonts. Per Microsoft: "Embedded fonts are not accessible to Microsoft Internet Explorer structured graphics [forerunner of VML] or DirectAnimation controls: We have confirmed that these controls only work with fully installed fonts and not embedded fonts". The only workaround for Internet Explorer users is to install the TTF font locally or use Google Chrome Frame, if the website supports it.

2. Firefox will display a default font while the web font is downloading, then redisplay the text using the web font, causing an annoying flicker effect that has been dubbed "Flash Of Unstyled Text" (FOUT). Google's WebFont Loader events can be used to avoid this for regular text. However, this workaround doesn't solve the issue for SVG Text elements.

3. Internet Explorer has a security setting called "Font Download" that can be disabled to block web fonts. Fortunately, this deeply hidden setting is enabled by default (allowing the use of EOT fonts).

4. Web browsers on Windows XP often have issues with anti-aliasing (i.e. jagged edges appear on text) because ClearType is disabled by default. For Firefox, enabling ClearType will often fix the problem, but in some cases using "Standard" font smoothing has a better result. For Internet Explorer, a clever fix can be found here.

5. Finding the width and height of text is complex and problematic. The easiest way is to use offsetWidth & offsetHeight but these values do not provide a tight bounding box of the text (especially height) so using a vector path-based approach may be preferred if extreme control over size and positioning is required.

6. Assuming the desired font is installed locally (see note #1), VML in IE7 and IE8 still require one more tweak: only one font name can be used (no backup font specified) and that name needs to be surrounded by single or double-quotes in addition to the CSS single or double-quotes used to enclose a string. For example: font-family:"'Verdana'"; (notice the double and single quotes used on both sides of Verdana)

7. SVG fonts are vulnerable to additional security risks, such as embedding an <iframe> in a glyph.

For more information on font comparison, see MIT, MediaWiki font issues, Six Revisions, SocialCompare, Wikipedia, Typekit, or Mozilla.