Tuesday, August 23, 2011

The @Font-Face Lift - An Easy Way to Pretty Up Your Website

I don't know about you, but if I see one more website with an Arial or a Times New Roman font, I'm going to deeply stick a razor into the biggest vein on my arm.

Not that I don't find them useful. For many years, Arial and Times New Roman were the de facto standards for "web-safe fonts", which is a fancy way of saying that these were fonts
that would show up on pretty much any browser no matter what you're using: Firefox, Safari, Google Chrome, Internet Explorer (or as we call that last one - the scourge of mankind that will not die). You could be in Yemen, on a foreign browser created by a Taliban warlord that just harvested and tested opium poppy seeds, and yup...Arial or Times New Roman!

Then there were a few fallback fonts: there was Verdana, which always sounded like a classier font, but the truth is that it is simply a fatter Arial. So if you ever

read a Verdana font that says "do i look fat??" respond back immediately with a vehement "of course not, sweetie."

Comic Sans: Honestly, my favorite font. I always thought it went well with our cartoon logo. But of course, it is cartoonish. So it might not be the best font for, say...a funeral home. You don't wanna go to find out when your loved one's services are about to transpire at Wally's Wild Water World .com or something. Go bury your loved one and get 15% off the mega water slide.

I'm probably getting a little irreverent at this point so I'll say for the record now;
I apologize if I have offended anyone. But I am pretty stoked about something I just saw on one of our client's blogs, which is a completely new font! You can see it here: www.vacationonyourmind.com. BTW Rockland Web Design can't take credit for that one,
Kathi Handt has a very talented relative that was able to set it up that way in her Blogger account, which unbeknownst to me is a new setting in the system. When I heard about this I checked it out and changed my own blog font.

So a little background just in case you are getting confused why this wasn't able to happen in years past: Every computer (including the one you are on) has a set of fonts installed inside. Then, when that computer goes to a website, the page that shows up tells the computer what font to use to display the text on the page. The problem of course, occurs when a certain font (such as Futura, Gothic or Amazing Grace) is not installed on a computer. Then all that shows up is nothing, or in most cases the backup font. Guess what that is? Yup, Arial or Times. Ugh.

What changed? A seldom-used technique called @font-face. I won't bore you with details, but essentially it makes the font in question hang out on the website, and when somebody goes to the aforementioned website, the pages will temporarily install that font on the computer that is being used. Pretty simple, huh? Unfortunately, few people used it up until now.

But designers are starting to catch on. And when something reaches a critical mass and starts getting used more, it reduces the cost needed to install on a website. This means that now, if you have a website, you can probably have an @font-face setup installed for just a few hours of work from your friendly neighborhood Spiderman (um, web designer). Wallah! Instantly, your website looks a little less vanilla, a little sexier, and more likely to attract people to stick around.

The reason why you want to do this is that it is a very easy way to change your entire website with very little effort. And when you change, update and modify your website often, it is a great way to have your customers coming back for more! Aesthetics definitely count, and if you pay attention to them, you won't end up with yet another customer leaving because he subconsciously got turned off by a fat arial. Rather, he (or she) will stick around - Amazing Grace is on the screen, and it is quite the bedazzling @font-face, one which certainly encourages a few extra clicks over to the shopping cart, contact form, or phone to give a buzz.

No comments: