When we launched this site, we were using the wonderful sIFR plug-in to show non-standard fonts on our website in an accessible way. That method was great, but now with almost universal browser support for @font-face, we were able to ditch Adobe Flash and make our site more friendly for mobile device.

The dilemma

When designing a website, you can utilize any font your heart desires... that's also installed on your computer. But if the specified font isn't also on someone else's computer, the font will be substituted. This results in an inconsistent look and feel from one computer to the next. The solution to this was to define a "family" of standard similar fonts. The first font available on a user's computer within the font family is used.

The tradeoff

Traditionally, the trade-off when it comes to fonts on the web has been accessibility and attractiveness. Use a boring font, but at least it's searchable, selectable, and readable. Images let you use fancy text but they take up bandwidth, load more slowly, degrade when printed, and can't be copied.

The next best thing

Some young chap (and apparently talented developer) named Mark Wubben developed a solution to this age-old dilemma by creating a javascript and Flash solution to this age-old problem (or at least age-old as far as the internet goes). Briefly, this solution, called sIFR, works by embedding a font in a flash file and then using a combination of javascript and css to replace HTML text with the fancy font. This solution has many pros. It is relatively lightweight, allows visitors to select and copy the flash text, is fully indexable, and cleanly degrades if the visitor doesn't have flash or javascript active. But it had two major cons: speed and Flash. When using sIFR, the replaced text takes a second or two extra to display and can adjust in size or position in an awkward way. And Flash became a big issue when a growing number of visitors couldn't view it on their mobile devices (namely and famously on Apple's iPhone, iPod Touch, and iPad devices). Alas, sIFR, served its time well, but a new era has dawned.

The @font-face era

With technology companies pushing HTML5 hard, there is now almost universal browser support for the @font-face CSS declaration. Shockingly, even the loathed outcast of browsers, Internet Explorer 6, supports the @font-face standard (albeit with one notable restriction — read on for more information). So what does the @font-face standard allow you do it? It allows you to embed any font into website by relying on server-side font files rather than client-side font files.

Let's talk browser compatibility

First things first, let's discuss browser compatibility. Here's a quick table of browser compatibility:

The good news is that all of these modern browsers support @font-face. The bad news is that the various browsers support different font file formats. As excited as you got when you found out that IE supports @font-face, bring it down a notch because IE only supports @font-face with Embedded OpenType (.eot) files, a Microsoft-invented format that's pretty much only used by IE.

How to use @font-face

In its most basic form, it's pretty drop-dead simple to implement. Here's how it works:

Declare @font-face in your CSS file to load the embedded font:

@font-face {
	font-family: 'JaneAustenNoSecret';
	src: url('janeaust-webfont.otf');
	font-weight: normal;
}

Assign the embedded font to an element:

p {
    font-family: JaneAustenNoSecret;
}

But because Internet Explorer needs Embedded Open Type files to work, you need to create EOT files and create rules for those EOT files too. Luckily, we found a great tool that will convert your Open Type (.otf) or TrueType (.ttf) font file to an Embedded Open Type file (.eot), as well as a number of other formats like Web Open Font Format (.woff). Not only that, but Font Squirrel's @FONT-FACE GENERATOR will even create sample css and html files that are cross-browser compatible.

Just to prove we can

Ah! there is nothing like staying at home for real comfort.

A gift from Google

Google has a supply for stylin' and free-to-use web fonts here:
http://code.google.com/webfonts

Check it out!

With great power comes great responsibility

Just because you can use virtually any font you want doesn't mean you should. A friendly reminder to use fonts tastefully...