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:
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 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!