- Plain text in a browser window is never as smooth as it is in the design (except in Safari),
- The designs I'm given almost always use fancy (non-web based) fonts for headings, intro text etc.
Currently I subscribe to two solutions, both client-side: sIFR and cufón. If you want a quick answer to "what should I use?" then here it is: if you want replacement for long sentences and headings, use sIFR. If you want replacement for a few words on a button or in a menu, use cufón. If you want to know more, read on...
How sIFR works
sifr-config.js, which is a human-readable config file containing additional formatting tweaks.
How to use sIFR
- Download the source (only
sifr.cssare actually needed).
- Generate a font SWF from a True Type Font file. You can do this manually with Adobe Flash (like this) but it is easier to use this online generation tool.
- Link to
sifr.cssin the head of your HTML page.
- Link to both scripts in the head of your HTML page, first
sifr-config.jsto read in the font SWF you created and use CSS selector syntax to select the HTML text elements you want to replace.
- Tweak away in
sifr-config.jsuntil the text looks right when sIFR is both enabled and disabled, in case the user is missing Flash (iPhones don't have Flash as of early 2010!).
How cufón works
<canvas> tag), or in IE's case, a VML object (Vector Markup Language). As a consquence of this, increasing the text size of the page either doesn't affect cufón-replaced text or expands the image, blurring it. Except in IE, which scales the text perfectly.
How to use cufón
- Download the source (all you need is
- Generate a font file from a True Type Font. You are unfortunately dependent on this online generator.
- Link to
cufon-yui.jsin the head of your HTML page. Beneath it, link to any font files you've generated.
- You may also want to create another file,
cufon-config.js, to hold selector information much the same way as
cufon-config.jswith what HTML text elements you want to replace.
Font foundaries are seemingly run by people who are very freaked out that their fonts are going to leak for free. Hence, the vast majority of fonts can't legally be embedded directly into the CSS (what, you didn't know about that? It's been around a while in some form or another - the @font-face directive allows you to supply the font file for obscure font-families - but it's only legal with open source fonts).
Because sIFR uses Flash, and Adobe has a cordial agreement with the font foundaries in Switzerland (or wherever) which allows anyone to embed pretty much any font in a .swf, sIFR is totally legal. cufón... cufón not so much. Although both supply a compiled/obfuscated font resource in
So in short, use cufón. Go on, it's young and fresh and rad! Push the font foundaries to legalise it! But remember: you read that in a blog post...I'm not going to be your lawyer if they come after you.
|Core file-size (not including fonts)||30KB||18KB|
|Independent of Flash||×||√|
|Doesn't flicker on load||×||√|
|Independent of online font-generator||√||×|
|Online font-generator supports Open fonts (.otf)||×||√|
|Supported in all browsers||√||√|