Question

There was a site, Web Design From Scratch (archived link, no longer has the following behavior), where the browser would render the fonts at first, and then quickly the header text flickered and then it became an image.

Does anyone know what technique was being used here?

Answer 1

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.