Font embedding

Whereas standard HTML and CSS do allow a webpage author to assign any font of their choice to a text element, there is no guarantee that the element will show as intended as the browsing user may or may not have the specified font installed in their system.

While we have commonly supported standards with which to author information for the Web, we still only have ten core Web fonts to present it, with six most commonly used. There are hundreds if not thousands of outstanding typefaces. A few are shipped by Microsoft, Apple and Adobe with their software, allowing us to use them with font stacks. That leaves a multitude of beautiful, important typefaces that can only be used as text in images or with kludges like sIFR.

Consolas
Consolas

sIFR (or Scalable Inman Flash Replacement), NiRF (Native Image Rendering Fonts), True Font Family or FLIR (Facelift Image Replacement) are technologies that allows you to replace text elements on screen with Flash equivalents or an image. Instead of creating images or using flash just to show your site’s graphic text in the font you want, you can use typeface.js , FontJazz or Cufón and write in plain HTML and CSS, just as if your visitors had the font installed locally.

Some notes:

Cufón: Quirks mode isn’t supported but might also work in some cases. All cufón-enabled pages must be UTF-8 encoded. Compatible encodings, such as US-ASCII, are also fine. The font generator supports TrueType (TTF), OpenType (OTF), Printer Font Binary (PFB) and PostScript font types.

FontJazz: The font generator is still beta and supports OpenType (*.otf) or TrueType (*.ttf) font types.

Some quick testing shows that sIFR loses on config time, FLIR is the fastest and Cufón the easiest to use.


Leave a Reply