Render Text With Javascript: Typeface.js

More and more alternatives for CSS typography are seeing daylight and that is great news for the webdesigner who would like to have some more typography options on the web.

Recently I have written tutorials about the use of sIFR3 and FLIR. Check them out if you like. Today it is time to teach you something about a technique I have just discovered. Today you will learn how to use typeface.js.

Basic information about typeface.js

Typeface.js is a JavaScript library that adds the possibility to choose from fonts that aren’t installed on your visitors’ computer. The JavaScript transform basic HTML and CSS to images with your custom font. Typeface.js is developed by David Chester, and I am sure we will see many more features for typeface.js in the future.

Cross-platform

Something that is really great about this technique is that it works in most browsers like Internet Explorer 6+, Firefox 1.5+ and Safari 2+, and if typeface.js is not supported by an older browser, it will degrade gracefully. No problems for the visitor: they will not notice they are missing the fun.

Search Engine Friendly?

One of the most important things about these kind of techniques is the search engine friendliness. If that’s not the case, we aren’t able to use it because it’ll hurt our search engine results.

Fortunately, typeface.js is very search engine friendly. You write just normal HTML and CSS, so the search engine can still know what your content is all about.

Advantages of using Typeface.js

I feel that this technique has many advantages and with some more development this can really turn into the perfect alternative to SIFR3.

Simple to use - The advantage above SIFR3 is that it is more easy to install and use.

Light-weight - You shouldn’t use typeface.js for whole paragraphs, but when you use it for headings or titles, typeface.js loads faster than alternatives like SIFR3 or FLIR.

No flash, No PHP, just JavaScript - The alternatives use PHP or flash to render their text. Typeface.js is only a piece of JavaScript.

Select your text - Although it isn’t as developed as one could wish, the option exists to select and copy text. You just need to select the text as usual and copy and you will have the text copied. The problem with this is that you can’t see what you’ve selected.

Installation to your website

After this introduction it’s about time to start installing and using typeface.js. You need to start with downloading the JavaScript library and place it somewhere in your site. I recommend you make a special folder called js to store all your JavaScript files.

Converting a font

Next we need to convert a TrueType font to a JavaScript file. We can do that by using the converter on the official site. Click here to visit the generator.

Choose your TrueType font file from the /WINDOWS/fonts folder on Windows. In a Mac you can find them here. Please keep in mind that you might not have permission to use every font you have installed, so check that out first. If you have your font converted and downloaded, copy the YOURFONT.typeface.js file in the same folder with your typeface.js.

Tip: If you can’t select your TrueType font from inside the /WINDOWS/fonts folder, try copying your file to another folder.

Implanting Typeface.js in your website

Now our preparation is done and we can start implanting the files into your website.

External CSS file - You will have, most likely, an external stylesheet in place. The next step is implanting the JavaScript files and it is really important to load your external stylesheet before the JavaScript.

Implant your external CSS file like this:

<link rel="stylesheet" type="text/css" href="stylesheet.css">

Implant the JavaScript - Next we will add the typeface.js library and the typeface.js fonts to our site. Here are the codes:

<script src="js/typeface-0.10.js" type="text/javascript"></script>
<script src="js/YOURFILE.typeface.js" type="text/javascript"></script>

The YOURFILE.typeface.js is the font you have converted earlier.

Using in your website

Using typeface is very easy, you only have to do some basic HTML and CSS.

<div class="typeface-js" style="font-family: YOURFONT">
Typeface.js will convert these lines of text to YOURFONT.
</div>

You have to add the class typeface-js to the element your text will need to show. If you already used a class on that element, simple add more:

<div class="class another-class typeface-js"></div>

The inline style declarations aren’t the perfect solution, but I guess that will be solved in future versions of the typeface.js library. You should replace YOURFONT with the name of the font you used when converting your TrueType font.

Mission Accomplished

That’s right, that’s all it takes to implant typeface.js in your site or blog.

I have created an example for you and I have did that in 1 minute. It is really that easy! Click here to view my example or here to view the developers example.

---

---

You want more Typeface.js?

I suggest you take a look at some of the links below for more information.

• Developers Homepage
• Dafont - For free fonts
• Examples

---