Blog

The Simple Switch to @Font-Face and a Brief History of Fonts on the Web

The Simple Switch to @Font-Face and a Brief History of Fonts on the Web

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:

Browser Lowest version Support of
Internet Explorer 4.0 Embedded OpenType fonts only
Firefox (Gecko) 3.5 (1.9.1) TrueType and OpenType fonts only
3.6 (1.9.2) Web Open Font Format (WOFF)
Opera 10.0 TrueType and OpenType fonts only
Safari (WebKit) 3.1 (525) TrueType and OpenType fonts only
Google Chrome 4.0 TrueType and OpenType fonts only

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...

DiggThis

Comments

Post new comment

The content of this field is kept private and will not be shown publicly. If you have a Gravatar account associated with the e-mail address you provide, it will be used to display your avatar.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

More information about formatting options

CAPTCHA
The following question helps us prevent spam submissions.