Ladysign

Embedding exotic fonts to your page

Difficulty:

We can wait for full browser support of the CSS property: @font-face to finally embed your exotic/unique fonts in your webpage. Or you can use several technique’s.
One technique is called: sIFR – Scalable Inman Flash Replacement, which is replacing your text to Flash pieces, which can load the unique font. However, you need a Flash plugin installed on the clientside.

Today, I will show you a different technique, which is using a Javascript framework to replace your text with images of your font. This font-embed technique is supported by your modern browser aswell with IE6.
1 more thing; you can’t select the replaced text with Firefox & IE. (With Google Chrome you can!).

Make sure you have a TrueType (TTF), OpenType (OTF), Printer Font Binary (PFB) or PostScript version of your font. Also this font should support embed modification. Usually free fonts are having such a change protection. (since you just display this font as an image – *kuch* embed.exe can probably help you.).
Need to convert your font to true type? – Here’s your solution; an online font converter.

Now go download the Cufón javascript framework,
save it in your webpage javascript folder. (I renamed this file to fonts.js). Then implement it into the of your page:

<script src="_js/fonts.js" type="text/javascript"></script>

On the Cufón site, use the generator to setup your custom javascript font. – Open the font in the Regular typeface box. (For Windows users, you should drag the fonts out of your fonts folder, and save it somewhere else on your disk.)
The default settings on the Cufón site will be good enough if you just use plain English on your site.
Don’t forget to check the EULA and the terms checkboxes and download.

I copied my custom font javascript code, into the same framework javascript (fonts.js):

Cufon.registerFont({"w":177,"face":{"font-family":"Name","font-weight":400,"font-stretch":"normal","units-per-em":"360","panose-1":"0 0 4 0 0 0 0 0 0 0","ascent":"288","descent":"-72","cap-height":"19","bbox":"-532.15 -402.008 684 323","underline-thickness":"7.2","underline-position":"-44.28","unicode-range":"U+0020-U+007E"},"glyphs":{" ":{"w":188,"k":{"q":-52}},"!":{"d":"...}}}});

And then I added the line to replace all the text with the class name: “handwritten” to my new unique font:

Cufon.replace('.handwritten', {});

That did the trick. I was amazed!