Embedding commercial fonts into websites

Question

Good evening ladies and gentlemen!

Searching for a cross-browser solution to embed commercial fonts like HelveticaNeue or Univers etc. I found some promising approaches.

First of all I will enlist all found, modern and easy to use approaches here:

1. sIFR
2. Cufón
3. typeface.js
4. CSS3 font-face

sIFR is well known and kinda easy to implement, but as I know, not as easy as it's Javascript-only siblings, Cufón and typface.js.

Cufón has caught my attention, as it renders a little bit better than typeface.js, and creates smaller sized font-files. Apparently there is no legal way to use it with any commercial font out there, which is disallowed to be embedded into this kind of solution.

For typeface.js the same situation applies, just differing in the fact, that it's not even able to convert fonts with a license, which forbids to embed it into websites.

Last but not least there is this 'new' CSS property, called font-face, which is incredibly easy to use, but for our loved IE we need to convert the files into EOT (Embedable OpenType) files.

Therefore special CSS declarations are needed for IE, to be able to use these fonts inside the browser.

The question is now:

What is the best approach to use such commercial fonts on websites? Use free fonts only from now on with Cufón or convert all used fonts into EOT files, and use them together with font-face?

Thanks for your well argumented answers, I appreciate it!

Answer 1

Finally after some hours research and testing I found a VERY nice solution for embedding special fonts into websites.

Using the approach via CSS3 font-face is imho the best solution.

The only overhead-thing you have to do for IE, is to convert your Truetype fonts (Unfortunately OTF is not working.) into EOT files. Microsoft WEFT is a solution, but the BEST way to do this, is to use the open-sourced tool 'ttf2eot', which can be found here: http://code.google.com/p/ttf2eot/

A web-based frontend can be found searching 'kirsle wizards' on Google.

The only thing to notice is browser support...

IE4,5,6,7,8 use the EOT files, while TTF support is only provided by Firefox versions >= 3.1. About Safari and Opera I'm not sure, but Safari 4 worked for me, and Opera 10 too.

(So Chrome doesn't support it I guess, due to usage of an older webkit version?!)

Based on our agency's clients' tracking statistics "only" 15 to 20% of their visitors use incompatible browsers like Firefox 2.0 or 3.0, older Safari or Opera versions or Chrome.

Answer 2

The bottom of this page has info on how to do it using straight HTML and CSS: http://www.albinoblacksheep.com/text/font