Pretty terminal fonts and WOFF woes

This evening I’ve been playing with fonts on the web, specifically fixed width terminal fonts. Years ago I was a big fan of Profont and Terminus on Linux, however since moving to a mac I’ve stuck with it’s standard terminal font. I wanted to see if these fonts could be rendered on the web, my first thought was that I could build my own tools to render them to a html5 canvas, that would be a fun project. However with a little further investigation I discovered WOFF. WOFF is a W3C standard which allows browsers to download and render ttf fonts. This isn’t perfect, as Terminus and Profont are generally used as bitmap fonts. However it may mean I can mix those character sets with other, unicode renderings (one of the things I love about OSX is how well the terminal renders Kanji).

So… I found TTF versions of Terminus and Profont on the web. Unfortunately the Terminus TTF renderings seem to be quite bad. In any case I used this tool to convert the ttf files to WOFF files. And then created a couple of simple webpages to test the fonts:

Terminus

Profont

The Profont version looks a lot better to my mind. In firefox/chrome the Kanji gets pulled in from some other font automatically. I think Kanji fonts are fixed width, I think exactly double standard latin characters, at least that’s how it appears on the mac terminal:

You can see the latin characters don’t get pulled out of alignment after the Japanese characters are inserted. The same seems to be stuff of the fixed width fonts in the WOFF webpages above in Firefox and Chrome, however in Safari the hiragana does seem to pull the other characters out of alignment. I’ll have to look in to ways of specifying a fixed width alternative Unicode font…

So, those are my experiments so far. Rendering Profont nicely in the browser seems relatively straight forward, and allows unicode character sets. Next questions is what to do with it!

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>