Custom fonts in your webpage using Cufon (canvas and VML)
For years designers have wanted to use custom fonts in their web page designs, this however has been problematic. Until now there’s only really been one option - sIFR - which unfortunately requires the Flash plugin. It also comes with its own set of problems, aside of requiring the Flash plugin, too many sIFR objets on the page have been known to cause problems in the browser - not to mention how tricky it can be to set up. Now, however there is Cufon - from Simo Kinnunen.
The main aims behind Cufon were to avoid proprietary software in favour of the open standard <canvas> and VML. Essentially Cufon acts as a web interface to fontforge to create an a JavaScript version of your font. There’s also a neat little online genertaor that allows you to upload your own font and generate the required JavaScript.
It’s incredibly easy to use, once you’ve created your JavaScript version of your font simple reference it along with the Cufon js (making sure you load cufon first!) then apply it to the element you want rendered. The following will render the text in an <h1>:
<script type="text/javascript">
Cufon.replace('h1');
</script>
For full instructions and downloads visit Cufon on Git Hub.
One comment on “Custom fonts in your webpage using Cufon (canvas and VML)”
Nice! Another great solution to the eternal problem.
Incidentally, there’s a JavaScript alternative to sIFR that I’ve been using in my projects for a while. It’s called FLIR or FaceLift Image Replacer and uses a combination of JS and PHP GD to do the trick. Does the job pretty well.
Cheers,
m^e