One of the most common problems UI Designers and Developers must always face is that of a limited font-palette. font-family:not very exciting.

Explaining to your web-designers "... no you cannot use Haettenschweiler..." and that the rather creative looking piece of typography they've just come up with is going to be a nightmare to achieve. There are however several tricks up a developers sleeve's though from a community dedicated to exploring this problem; sIFR for example.

However blog posts continue to debate this rather un-explored avenue of the internet; typography. An interesting blog post at Ajaxian; "The Fight for Fantastic Fonts (or, Let’s Give Tahoma a Rest)" goes into this subject with complete aplomb. However it was written in July of 2008.

Currently I use some rather convoluted PHP GD Library script to dynamically render text as graphics in the instance of non web-safe fonts, but for the longest time I've wondered if there perhaps isn't an easier and more reliable method.

This led me to an article on SitePen introducing the concept of Scaleable Vector Graphics and Dojo (another Web2.0 JS Library).

I was inspired even more to learn about SVG after seeing a very interesting implementation of it here. However this example relies on the Dojo JavaScript framework and we're using Mootools so I figured I'd try and get to the source, learn about embedding SVG content into webpages.

Despite implementation of SVG in early 2008 I'm surprised it hasn't seen wider adoption in today's next generation browsers. Well you needn't look to far for the usual suspect. Internet Explorer (Why IE6 Must Die), but it isn't just IE.

Even with FireFox 3, support is limited and alot of the W3C font-specification still isn't implemented. (List of implemented SVG modules in FF3)

After some more reading I discovered that the people over at Google had come up with a way of implementing SVG in browsers that didn't provide full native SVG support in the form of Javascript utilizing the SVG capabilities of Flash, something crucial in implementing Vector layers on Google Maps. You can read more and download the Javascript library here.

There are some great examples of using SVG, some you can find here, and there are even more useful examples here; from W3schools. SVG is a very powerful vector rendering capability and I think once full SVG support is adopted across all browsers Web UI's will explode even further.

IMPORTANT NOTE:  Without 3rd party plug-ins, SVG support is still very limited; even in FF3 and IE8. However browsers based on the -webkit rendering engine (Chrome and Safari), natively support the most features with FF3 supporting a limited subset. IE, at this time, supports none without plug-in support.

My 2 Steps to SVG Fonts in HTML

(Example here : sandbox.tonycollings.com#example1, this example uses an external SVG resource to declare font glyph vectors.)

NOTE: These examples will only work in Chrome and other browsers using the Webkit rendering engine (Safari). FF3 doesn't support any of the Font Module SVG Specification at this time and requires alternate SVG rendering technology to view.

Step 1: Create a file of MIME type "image/svg+xml" for use in an <embed> or <object> tag. You can find the full W3C SVG Font Specification link below but I have created 2 examples you can use. View the SVG/XML using 'view-source' from your browser.

Example 1. Using the 'embedding' method to outline your font glyphs, and
Example 2. Using the <font-face-uri xlink:href="fonts/font01.svg#test"/> to use a font outline specified in an external .svg resource.

Step 2: Add your <embed> or <object> tag embedding your new svg+xml file. i.e. (Code saved in Step 2 was font03.svg)


<object type="image/svg+xml" data="font03.svg" width="400" height="300">
<div>No SVG Support</div>

<embed
type="image/svg+xml" data="font03.svg" width="400" height="300"/>
</object>

... and there you have it. SVG fonts in HTML.

There is some talk about using the CSS3 "@font-face" and pointing it to an .svg file, but again, without next generation browsers adopting full SVG support this will be slow to get off the ground.


<!--style type="text/css">
<![CDATA[
@font-face {
font-family: 'TestComic';
font-weight: normal;
font-style: normal;
src: url("../images/ext-TestComic.svg#Font") format(svg)
}
]]>
</style-->

Further Reading

Addendum : VML and Cufón

A free Javascript library that applies the same principles in a nice little JS package. No flash required and no need for all that extra coding !

http://cufon.shoqolate.com/generate/