WebAppers

/ best free open source web resources /

Shopify

Rendering Text with Javascript, Canvas and VML

Posted · Category: Fonts, MIT License

Instead of creating images or using flash just to show your site’s graphic text in the font you want, you can use typeface.js and write in plain HTML and CSS, just as if your visitors had the font installed locally.

Typeface.js uses browsers’ vector drawing capabilites to draw text in HTML documents. The typeface.js project has two components: the perl module for converting fonts, and the javascript library for drawing in the browser. The perl module extracts glyph outline information from truetype fonts and writes that data in JSON format. The javascript library then traverses the HTML document and renders text using <canvas> or VML to draw the glyphs.

This code is and always will be free and open source. This includes both the typeface.js javascript library, as well as the perl module with functionality to convert truetype fonts to typeface ones.

Typeface.js - Rendering Text with Javascript

Requirements: Firefox 1.5+, Safari 2+, Internet Explorer 6+
Demo: http://typeface.neocracy.org/
License: MIT License

23 Comments
  • http://bertobox.com/ bertobox

    I tried the demo in Safari 4 Beta and while it renders the text in the correct fonts, I don’t like that I am not able to select the text. I’m not sure if they could even be links, in that sense. :-\

    Still, it seems to work great at rendering the text, there was no delay in my case! :) good job developers!

  • http://www.savemp3.net cris

    thanks for the nice post.

  • http://www.steinhaug.com/ Kim Steinhaug

    Now this was really cool, I will without a doubt include this in several projects! Seems this is a great alternative for flash based versions. Why use JS+Flash when all you need is JS?

    Great find!

  • http://chepelle.altervista.org/wordpress/ carlo

    good!!!

  • http://inkubis.com inkubis

    wew…

    nice info

    thankyu

  • Allan

    perfect! great find there… thank you so much!

  • Jonny

    If you are running into permission issues when converting a font, download this application:

    http://www.andrew.cmu.edu/user/twm/embed/

    I found it through the typeface.js forum…and it worked perfect.

  • http://www.webexcellence.net Sudirman

    Well, I have been using this for 3 months or so. But, I’m afraid I have to seek & switch to another one, since typeface isn’t working on Opera 10 and IE8.

  • Jonny

    Did some more playing around with this. I’m very impressed with how it works, although the script still needs a little work. For example, the script is run on the page load. This is fine until you want to dynamically update text on the page somewhere. I can’t really find an easy way to re-render a portion of the page either.

    Whatever the case, this is a really interesting approach to making custom fonts available online.

  • http://www.mashupdesign.com pisakec

    very cool! but I don’t think it look good on seo. soure code is full of code instead of simple sematic.any idea?

  • Serge

    This is fantastic. Probably one of the most elegant implementations of text rendering I’ve seen.

  • Mike

    @Jonny: Regarding updating the page dynamically, the typeface.js website refers to a process named “_typeface_js.renderDocument()” that can be called from script. Maybe a dynamic page could update the text, then call this render process to set the text in the desired font.

  • Pingback: typeface.js: hacer render de texto y fuentes con javascript : Notitodo

  • Pingback: typeface.js: hacer render de texto y fuentes con javascript | dominios, diseño web, ecommerce - Mantis Technology Solutions Blog

  • Pingback: Lenguajes X » typeface.js: hacer render de texto y fuentes con javascript

  • http://idProjections.com/ Kyle

    Although this is a very handy tool I kept hitting the permissions issue with any font I used.

    After doing a little more searching i ran across http://cufon.shoqolate.com/ and it seemed to work out pretty well.

  • http://www.kunterilalan.com designer

    this is one hell of a real challenge :)

    Just looking at the front-view on their page which talks about not only kerning and spacing, but the ttf conversion(!), such an effort would render all our previous efforts on the GD libraries or similar in an attempt to substitue fonts with on-the-fly generated images just a total waste!

  • http://kooms.wordpress.com sophy

    This is so cool Typeface.js.Can Typeface.js embed Unicode font like Khmer Unicode font?

  • Pingback: Nilesh Manohar & Erzsebet Marothi » Cufón - Another sIFR alternative for Font Embedding

  • http://www.salesworks.com/blog/ Colin Greig

    I’m looking forward to the day when this can be accomplished cross-browser with no issues.

    PS: Time to separate your trackbacks from your comments in wordpress. =)

  • Pingback: Cufòn una nuova sfida a sIFR? | Napolux.com

  • Pingback: John Doe's personal blog

  • http://www.bloggeriesta.co.cc bloggeriesta

    awesome..cool!

Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons