These here internet tubes are known for two things; Bringing a whole world of people together to gain and share knowledge and experience, and Times New Roman. Yes, Times New Roman, that default of web fonts, is practically inescapable online. So too are a few others; Arial, Helvetica (if you have a Mac), Verdana, Georgia, Courier, Tahoma, Comic Sans. Oh how I shudder to think of Comic Sans.

But you notice something? This blog post isn’t written in any those. It’s written in a fine little font called Aller, developed by Dalton Maag. It’s long been too difficult, cumbersome, or both to reliably use custom fonts on the web. But we stand on the brink of a new era, one that gives us designers more freedom, and may make the web a little better for everyone.

The earliest solutions for using custom fonts were to just save your text as an image and upload it on to your site. Obviously, this presented several problems. In the early days of the web this resulted in long delays in page loading since modem speeds were much lower. People relying on screen readers (such as the visually impaired) couldn’t get the text in the image. Additionally, search engines couldn’t see the text and ignored it (and with it, your website).

Eventually, this led the way to image/text replacement. The idea behind this was simple: Since download speeds were improving, the delays could be mostly eliminated. By coding the site with web safe text, then using CSS to hide the text (either in a hidden overflow, or beyond the borders of the screen), we could replace it with an image. Since screen readers and search engines ignore CSS, the site would still be useable. Unfortunately, this method had it’s own set of problems. Text couldn’t be copied or pasted from the site, and search engines began to ignore ‘hidden’ text.

Flash and JavaScript based techniques, such as cufon and sIFR, were then developed to solve the issue. Unfortunately, by relying on extraneous technology, they couldn’t be relied upon in many situations. The iPhone and iPad don’t support Flash, and most mobile devices that do have such abysmal support that users avoid any contact with sites using it. Additionally, many mobile phones still do not support JavaScript, and many users simply turn it off for security concerns.

So where now do we stand?

The @font-face solution seems ideal on paper, and has existed since the days of IE6. Most web designers know of it, but few use it, even though most can’t articulate why they don’t. The most common answers in my experience, are that they heard that it doesn’t quite work right. Many of those who have put in the effort to learn to use it get frustrated when it refuses to work and give up.

The problem with @font-face was that although all major browsers support it, they all required their own specific type of font. Safari, Firefox, and Opera all support True-Type and OpenType Fonts, while mobile platforms such as the iPhone only supported SVG. Worst of all, Internet Explorer only supports Embedded OpenType Fonts; Where does one procure these mythical .eot files?

Today, we have two major solutions to this problem. The first is Google Font API, a collection of roughly 20 fonts, and a code generator to make them work on your site. Initially relying on JavaScript, it now relies solely on CSS. The downside to this is the limited number of fonts and the dependancy on Google’s own servers. If someone were to access your site while Google’s font servers were down, your site would revert to it’s default fonts. To be fair, this is Google we’re talking about. Rarely do their servers go down, but it has been known to happen from time to time.

Thankfully, our second solution is FontSquirrel, which addresses both these issues. What is FontSquirrel? Well, mainly it’s a repository of high quality, commercially licensed free fonts for use on the web. These fonts are hand picked by font designer Ethan Dunham, who also runs the site, so you can be assured that they passed his test of quality. The other great part of FontSquirrel is the @font-face Generator. Using the Generator, you can select a number of fonts from the site, or fonts you yourself are licensed to use on the web, and create a quick package of proper font types with the required CSS. The Generator will take whatever font file you give it, and spit out an .eot file, as well as an .svg, .ttf, and .oft, doing all the hard work for you! Designers no longer have an excuse as to why they don’t use @font-face.

It works, but my fonts look bad! (Hint, hint)

In the physical world, fonts are just shapes, but in the digital world they must be made up of the pixels on the screen. Hinting is used in digital fonts to give the software an idea of how the font should be displayed onscreen. What hinting does is adjust (some might say pervert) the font so that it stays inside the pixel grid.

For the most part, Macs generally ignore hinting, instead using transparencies and other techniques to replicate the font as accurately as possible. This is why at very small sizes, most fonts on the Mac become somewhat blurry. Windows, on the hand, take the stance that maintaining the pixel grid is more important than the integrity of the font. This is why, at very small sizes, all Windows fonts begin to look the same. The fonts can only be simplified until they reach a minimal number of blocks to be made up of.

Hinting is something that most free fonts don’t have, and even many commercial fonts don’t do very well. It’s a very difficult job, trying to keep the fine line between maintaining the integrity of the font, and maintaining the integrity of the pixel grid. When generating your .eot fonts, FontSquirrel tries to automate this process. Early on, it was mostly a disaster. Now they seem to have discovered an algorithm that works most of the time. Or at least, some of the time. Your mileage may vary, but in my experience it’s pretty good. With ClearType enabled on your Windows machine, it’s very often above-average.

What about commercial fonts?

TypeKit is a great resource for those who want to use professionally and commercially licensed fonts. TypeKit works as an intermediary between font foundries and designers, allowing commercial fonts to be used while protecting them from illegal download and misuse. My only complaint about TypeKit, and really it’s not their fault, is that it seems font foundries have been very slow on the uptake of new technology, and so their library isn’t as vast as it should be. At the time of this writing, it includes 514 fonts, but someone’s favourite is bound to be missing.

The upside to TypeKit, however, is that with professionally developed fonts you are likely to see much higher quality hinting on your Windows machines.