Tuesday, September 9th, 2008

Custom fonts thanks to rendering SVG font definitions

Category: Dojo, SVG

Tom Trenka has a fantastic post on custom fonts with dojo.gfx that shows the SVG font definition implementation.

Part one of the article deals with painful, practical issues around the licensing of fonts. Tom discusses the various technical options out there, and then gets to the solution:

In general, the issues surrounding font usage have to do with the ability for someone to visit a web site, grab a specific file, and be able to reuse it without paying for a legitimate copy within any of the most commonly used programs (such as Office). Because of this concern, both the EOT and sIFR techniques work–because the fonts are embedded in a form that is not reusable in a common way.

One approach: the SVG Font Specification

Similarly, the SVG Font specification allows for the same concept—by working with a specific font definition, especially one that can be customized for the specific usage, the spec avoids most of the prickly issues surrounding licensing.

SVG fonts are relatively simple in concept; within the <defs> element, you define the main specifications of a font, and then you include specific glyph definitions. Optionally, you can include character-specific kerning information (the space between letters); some fonts include this type of hinting, and the SVG specification supports it.


  1. dojo.require("dojox.gfx");
  2. dojo.require("dojox.gfx.VectorText");
  4. var myfont = dojox.gfx.getVectorFont(someUri);
  6. var s = dojox.gfx.createSurface(someNode, width, height);
  7. var g = s.createGroup();
  8. var phrase = myfont.draw(
  9.     g,
  10.     { text: "The rain in Spain falls mainly on the plain.", align: "middle" },
  11.     { size: "3em" },
  12.     "blue"
  13. );

Very impressive. If you are a typography wonk, then you have probably watched Helvetica: The Movie:

Posted by Dion Almaer at 8:31 am

3.8 rating from 32 votes


Comments feed TrackBack URI

Am I missing the point of this movie clip? Its a very interesting discussion of the metro map for Manhattan and surrounding area – nothing to do (directly) with fonts or typography.

I’m excited about the new fonts addition to dojo.gfx, and look forward to some interesting and innovative stuff with it. There will be those that shoot it down – and I’d highlight Tom’s caveat: “we recommend that you treat this the same way you’d treat sIFR—use it sparingly, and don’t use it to render all of the text on your pages”. For accents, pull quotes, navigation menus and even logos it could be a real bonus. Best practices will still apply – progressive enhancement should probably be used in most places, ensuring seo/a11y where appropriate.

Comment by sfoster — September 9, 2008

Very interesting and innovative concept! The biggest problem I see though is that text is no longer selectable (at least sIFR is able to handle this) =/

Comment by restlessdesign — September 9, 2008

Leave a comment

You must be logged in to post a comment.