Embeddable webfonts (as introduced with Safari 3.1) are not just about using fancy fonts on web pages. It also opens new possibilities for using glyphs that are simply not available in the standard system fonts. Let’s say you are a linguist or archeologist and wan’t to set an ancient text and you need characters that are not available in Arial or Lucida Grande. Putting little images inside the text was the only way to do it – so far. But the images wouln’t scale and copy & paste of such a text wouldn’t work properly. But with webfonts you could do those things smoothly – and much more. Here are two examples …

Replacing single glyphs with alternates

In this example an ampersand is replaced with an alternate version from an embeddable webfont. This is done without even touching the HTML code of the text. With the descriptor “Unicode-Range“ it is possible to limit the webfont replacement to certain Unicode ranges or even single characters. In this example it is used for a design purpose, but this feature will get very useful in lots of different areas.

See the live demo here. (Safari 3.1 required)

Replacing a text with a logotype

In this example a certain phrase is automatically replaced with a single logotype glyph from an embeddable webfont. The replacement doesn’t require JavaScript and the underlying text remains untouched. It can be indexed and copy & paste keeps working. Since the embedded logotype is treated like any other character on this website, it will always automatically scale properly when the text size in the browser is changed.

See the live demo here. (Safari 3.1 required)