what technique is being used to generate fonts on this website?

Question

http://webdesignfromscratch.com/

If you look closely, the browser will render the fonts at first, and then quickly the header text flickers and then it becomes an image.

Does anyone know what technique is being used here?

Answer 1

Looks like Cufón.

Answer 2

They are using Cufón:

<script type="text/javascript" src="/assets/cufon.js"></script>
<script src="/assets/Delicious_500.font.js" type="text/javascript"></script>
<script type="text/javascript">Cufon('h1');</script>

The above is applying the library to all h1 elements, I would imagine.

Another popular technique to achieve this is sIFR, however that requires Flash. The Cufón website says:

Cufón aims to become a worthy alternative to sIFR, which despite its merits still remains painfully tricky to set up and use. To achieve this ambitious goal the following requirements were set:

1. No plug-ins required – it can only use features natively supported by the client
2. Compatibility – it has to work on every major browser on the market
3. Ease of use – no or near-zero configuration needed for standard use cases
4. Speed – it has to be fast, even for sufficiently large amounts of text

And now, after nearly a year of planning and research we believe that these requirements have been met.

Answer 3

I've used 'Dynamic Text Replacement' as described in this article from A List Apart: http://www.alistapart.com/articles/dynatext/

The site you mention uses Cufón.