Web Fonts: The Future is Finally Here

A few weeks ago I saw someone in my Twitter stream retweet an article about using image replacement techniques. My first thought was, “wait, are we in 2007 and someone forgot to tell me?” Sadly, no. It’s 2011, and people are still recommending the use of image replacement.

Please stop! There’s a better way!

A Little History

Fonts on the web have always been limited. Designers have looked for ways to have more than the basic few defaults available for use in their designs. Some of the methods that have been used to get around the limitations in available fonts include:

  • All-image websites
  • Flash
  • Images as headers
  • sIFR & other image replacement techniques
  • Cufón

But this can be a point of contention between SEOs,  who want content to be crawlable, and designers, who want websites to look attractive. The above solutions aren’t great; images and Flash aren’t crawlable, and sIFR, Cufón and others require the user to have JavaScript. They also make text difficult (or impossible) to select, and don’t support web standards.

These were only supposed to be stop-gaps until something better came along.

Enter Web Fonts

That something better is web fonts. They’re also known as @font-face.

Several groups have been trying to make a go of web fonts for years, but it has required the participation of both browser makers and font designers. With current modern browsers (Firefox, Chrome, Opera, and the lastest few versions of IE), this is finally a reality.

By uploading your font of choice to your webserver, and linking to it from you CSS file, you can now use pretty much any font you want.

Of course there are some restrictions. Most browsers support TTF and OTF font formats, which are what you can install on your PC or Mac. Internet Explorer needs its own special format, WOFF (you expected that, didn’t you?). Also, not all font license agreements allow for embedding on the web in this manner.

Fortunately, there are several great resources to make this all easier. These are two that I love:

Font Squirrel

Font Squirrel has several “kits” available for commercial use, where you can download the font to your computer for use in your mock ups and artwork, as well as grab the web font formats and CSS. They also have a tool where you can generate the files and CSS you need from fonts you already own. Then you just upload the files to your web server, and you’re good to go.

Google Web Fonts

Of course, Google had to get in the game too. They recently expanded the number of fonts available through their service, and the bonus with Google is you don’t even have to host the font files yourself! Other web font hosting services offer similar features for a price.

So unless your website audiences are still using IE6, web fonts are now a viable technique. We’re like, totally living in the future!

Photo: adactio/flickr

About Dawn Smith

Dawn Wentzell is currently working in custom mobile app development as Project Manager, Mobile Technology at SpeakFeel Corporation. She has experience with SEO for both local businesses and national markets, loves to do site audits and hates IIS hosting. You can find her at dawnwentzell.com or on twitter at @saffyre9.

Filed under: Tips

4 Comments

Brad Dunzer

Hi Dawn,

Nice piece on web fonts. If you will allow me I wanted to clarify a few items for you. The @font-face call has been around since IE 4. Yes Microsoft was the first, but it required an EOT file up until IE9 which as you pointed out takes a WOFF as well. Safari since version 3.1, Firefox version 3.5, Chrome version 4 and Opera version 10 all have support for the @font-face call.
You pointed out two good solutions for getting fonts as well but don’t forget about the online services out there as well – like WebINK and Typekit and others. The services take care of a lot of the file format issues so you don’t have to. We deliver the correct fonts to the browser and OS combinations from each visitor. Google and Font Squirrel both help with this as well but the difference between those types of services and online services like WebINK and Typekit are quality. Free fonts work for a lot of people, but remember they are free. Fonts that services like ours represent are professional quality, meaning a lot more time has been invested in making sure the font looks good. Don’t get me wrong – a lot of fonts that free are very good – I am just pointing out that buyer beware.

Also you point out the license agreements (EULA) issues with lots of fonts. This is something that a lot of folks might not take seriously but really should. Very few font Eula’s allow for web font usage and the user really needs to be concerned about this and is something that services like ours handle so the only thing you need to be concerned about is making the site.

I hope my comments help clarify a few items.

Brad Dunzer
WebINK Product Manager

Dawn Wentzell

Wow, thanks for the detailed reply Brad! I didn’t want to end up writing a novel, but you definitely clarified a few holes in my post.

I’ve actually not explored WebINK’s services before. The fact that you have Adobe fonts is a huge selling feature. Professional fonts will definitely appeal to some designers; others might be willing to sacrifice quality. There’s certainly a lot of choice out there, so in the end I hope this post encourages people to explore what’s available.

Sherman Boyd

Useful post. Those Font Squirrel fonts look a lot cleaner than most of the Google Font choices. I’m looking for one font in particular, Avenir, but maybe I just need to find the next best thing.

Dawn Wentzell

Hi Sherman,

Check out WebINK and some of the other paid services that are compared here; you might be able to find Avenir.

Not necessarily finding the exact font you want/need can be a definite drawback to web fonts, but if you plan for it in advance you can do your artwork with the fonts that are available. Unless you’re stuck with a corporate standard.

PS. Best. Avatar.Evar.

Comments are closed.