Typeface.js: Last word not rendering in Internet Explorer

Posted by Michael Atkinson on August 12th, 2009 in Web development | 1 Comment »

Typeface.js is my favourite way to embed custom fonts into web pages. Ideal for making attractive headlines, it’s SEO friendly, relatively lightweight, and unlike solutions such as sIFR it’s quick and easy to implement (and doesn’t require Flash). The one minor-ish flaw is that in most browsers, the user will not be able to copy text.

Whilst testing an implementation of Typeface.js I came across an issue in Internet Explorer. Whilst it renders perfectly - even in IE6 - it was dropping the last word in the heading. The solution is to add a call to typeface_js.renderDocument(); just before the closing </body> tag.

Demo: The problem, the fix.