Embedding Fonts with JavaScript

First, let me say that I realize the embedding particular fonts in a web page goes against my general belief that keeping things simple is more effective, elegant, portable, blah, blah, blah. Yes, I still believe that, but I’m tired of the face people make when they are actually presented with a site built on these beliefs. Somewhere there is a middle ground and I am determined to find it, because I’ve been missing it along the way. The balance between simple elegance and the look of true appreciation from the average (read *uninformed* here) web user is out there waiting for me to discover it.

With this new approach to web development in mind, I encountered Typeface.js, a simple script that enables non-standard fonts to be embedded into web pages (see examples here). I say simple because it is way less involved that SiFR, which has become a popular way to “fancy up” text while still allowing it to be read by alternative devices, seen by search engines, and selectable by the user (for copy/paste/portability). The main drawback to SiFR in my mind is that is requires access to a copy of Flash and I am truly that lazy AND cheap.

Looking into it further Typeface.js seemed to be a less involved process so I gave it a try and had it up and running in a matter of minutes. Good stuff. Here’s the low down from my point of view right now:

Pros:

• Doesn’t require a copy of Flash
• Supported browsers include Firefox 1.5+, Safari 2+, and Internet Explorer 6+, and degrades gracefully in unsupported browsers
• Text can be searched, copied, and repurposed
• Draws *pretty* letters with clean, smooth lines for much better looking type, FINALLY
• The code is open and free
• A handy TTF converter is available for download or at the site, that converts True Type Font files for use on the web

Cons:

• It doesn’t support all CSS2 features, but it covers the basics and that’s all I really want anyway
• You must have copyright permission to distribute the fonts you want to use
• Doesn’t taste like chocolate

Wait, what was that about having permission to use the font you want to embed on your site? This is a very important thing to note, because typographers work hard too – hunched over their sketch books and laptops in the dark – making the cool fonts you want to use, and they have to eat. Not to worry, though, there are open fonts available for you to use if you’re in a bind. I like to think the typographers who have made these open available have rich benefactors or sugar daddies (or mamas), or are employed by large companies that give them regular paychecks and allow them to have some free time toward altruistic creativity. Truthfully, I just want to imagine them being well fed so I can use these fonts guilt free.

The MgOpen Collection (Get them here)

• MgOpenCanonica
• MgOpenCosmetica
• MgOpenModata
• MgOpenModerna

Just as a little note, Typeface.js renders text with cleaner lines than the image below displays