Elance Blog

Typography: Stocks Tank, Customs Bank

For years, website typography was limited to a handful of "web-safe" fonts. Now with new developments in web technologies like HTML5 and CSS, there are few reasons not to utilize the different typography at one's fingertips—especially since SEO is no longer negatively impacted. In this blog article, freelance web designer and writer Scott Stanton shares  how to infuse more personality into your site using @font-face CSS rule.

Back in the day when calculations were done on an abacus and stories were chiseled in stone, the only way to get eye-catching fonts in your website was by converting them to images and then placing the images in your site. Talk about two steps forward and one step back! Not only was that a little bit on the time consuming side of things, but in order to break out of the core 13 or so “web safe” fonts by converting the text to an image, you were actually taking text out of your site, a big no-no if you’re hoping search engines will ask you to prom. Text is the way to impress search engines and a surefire way to get yourself noticed.

The last time I had my car in the shop I noticed they had a computer screen full of custom wheels that were available for purchase. So, if we’ve reinvented the wheel that many times does that mean we’ve finally reinvented typography in the cyber world? The simple answer is, yes! With HTML5 and CSS3 we’re now able include custom fonts in our websites and have them remain viewable across multiple browsers and operating systems thanks to the @font-face CSS rule. Granted some browsers have supported it for a while, it’s now accepted by about 98% of the browsers and operating systems out there.

Before we bust out the chisel and stone to do some coding, let’s filter through all that jargon I just spouted off and transform it into a graphical image that will make you say, “Oooh!” Check out how many different fonts are used in this site thanks to the @font-face property. I know what you might be thinking, and sure, this could have been done with lots of images. But then you wouldn’t have any text for search engines to feast their hungry algorithms on:

 


Let’s talk code. Once you’ve found the font (or fonts), that you think will make your site sparkle brighter than the rest, upload it to your server. I should step in at this point and suggest that you make sure you’re not violating any copyright rules with your fonts of choice. Now open up a new CSS document and get ready to scribble a few lines of code. For this example I’m going to pretend my font name is “elance.ttf”.

@font-face {

           font-family: elance;

           src: url(/location/of/font/on/your/server/elance.ttf) format(“truetype”);
}

 

Once you’ve set that bit of code in stone, you can use it just like you would any other font.

.superCoolClass {
           font-family: elance, veranda, Helvetica, sans-serif;
}

Wait. Put the phone down. It’s not quite that easy, so you can’t start bragging yet. In order to achieve full cross-browser compatibility you’ll need to scratch some more code and convert your font to an Embedded OpenType font (EOT) for compatibility with Microsoft’s Internet Explorer. The conversion process is fairly painless, if not completely, and can be done with the Microsoft WEFT tool or through this simple online service. Once you’ve mastered the conversion process, wipe your brow, take a deep breath and upload your EOT font to the server along with your TTF font. Your EOT now covers your back on IE6, IE7, and IE8 while your TTF has doing your dirty work in Firefox 3.5+, Safari, Chrome, and Opera v10+.

All that talk about converting and file types may have your head spinning a little, but, let’s keep our eye on the prize by taking a look at another good example of where we’re going with this whole @font-face usage for typography in our website. Check out this real basic design from Extensis that utilizes the @font-face property nicely with a handful of fonts to give the page some character:

 


Now let’s get back to work on our CSS file by modifying our code a bit. We’ll need to add a bit of code to what we already have in order for IE to search the viewers computer for the font before reverting to the EOT. It’s important that you type the font exactly as you downloaded it, capitalization matters on this one. To do this we simply add a “local” declaration in front of what we already have. So our code should look as follows:

@font-face {
           font-family: elance;
           src: local(“elance”), url(/location/of/font/on/your/server/elance.ttf) format(“truetype”);
}


.superCoolClass {
           font-family: elance, veranda, Helvetica, sans-serif;
}


The final step is to add the source for our EOT font; we’ll drop it in above our ttf, so your final code should look like this.

@font-face {
           font-family: elance;
           src: url(/location/of/font/on/your/server/elance.eot);
           src: local(“elance”), url(/location/of/font/on/your/server/elance.ttf)
format(“truetype”);
}

.superCoolClass {

           font-family: elance, veranda, Helvetica, sans-serif;
}


Congratulations! You are now qualified to put fancy typography in your website. If that short coding lesson caused beads of sweat to form on your forehead, let’s get inspired by looking at another typography masterpiece you’ll now be able to create thanks to the fruits of your labor.

Fixel is a small design agency that made great use of custom fonts to help give their site a fun little vibe. Notice how there isn’t an abundance of photos in their site; the only ones we see on the home page come in the form of screenshots of sites they designed, which happened to have a photo in them. Most of their design elements are coming from the fonts. Fixel is a small design agency that made great use of custom fonts to help give their site a fun little vibe. Notice how there isn’t an abundance of photos in their site; the only ones we see on the home page come in the form of screenshots of sites they designed, which happened to have a photo in them. Most of their design elements are coming from the fonts:

 


If you’re looking to design a clean website, but would like to inject some character or personality in it, typography is a great way to do so. It doesn’t present the cluttered effect that images tend to do, grabbing an overwhelming eyeful, but adds contrast to your site through their lines and colors. They might not be quite as catchy as hieroglyphics, but that’s what icons are for. And rattling off a few lines of code probably beats a chisel and stone any day of the week.

About the Author
Scott Stanton has spent the past decade working nights as a freelance web designer, only to write about the latest design trends at his day job as a freelance writer.