Tired of the same old boring fonts on your websites? Now you have a legitimate option to really spruce up your pages, and still make them accessible and SEO friendly. The answer is available and you can take advantage of it today!
For over a decade, there hasn’t been much of a choice in what to use, since you could only specify a typeface that existed on the end-user’s computer. The newest thing happening to fonts on the web are that the fonts can now be embedded into web pages. The technology, AKA “web fonts”, has existed for a long time, but only recently have all of the major browsers started implementing it.
This is the cutting edge of web development, and all of the greatest and brightest minds in the web industry are working tirelessly to make this long-time dream a reality. With the newest browser and javascript technologies, custom web fonts can be used today in ALL of your web properties.
Why use web fonts?
There are two major reasons to use web fonts. The first is that you can add a significantly more modern and less boring style to your entire website in an accessible manner. The fonts work and behave just like your good old Arial and Times New Roman, but without the stagnant air of a 1920s newspaper. The second reason is that web fonts are SEO friendly. Because they work just like regular fonts, because they ARE regular fonts, there’s no need for image replacement techniques that some within Google’s ranks have indicated are spammy signals.
There’s a lot you can do that don’t involve what are traditionally spammy techniques like text-indent:-9999px, which has been used to hide text and links in the past by spammers, because they thought only search engines would read it and users wouldn’t know. So they used that to boost their rankings. So it’s kind of gotten a bad rep from our standpoint, and we see it more as a spam technique than we do an accessibility technique.
With web fonts, image replacement techniques are obsolete, and your text is untouched and pristine in the eyes of the Googlebot.
A few things to consider first
However, there are a few caveats to using web font technology. The major considerations are that there is a not insignificant performance hit for using embedded fonts, the rendering in IE is very spotty at times, and not all fonts are created equal. Additionally, web fonts should really only be used for headline type, as the quality degradation in IE makes it unsuitable for blocks of text. This is the primary problem that developers are working on fixing, so it’s only a matter of time before it’s not an issue any longer.
Places to get the fonts and the instructions on how to use them:
http://typekit.com/ – This is where the professional fonts are at. I would highly recommend using this service, and I would highly recommend using fonts provided by the FontFont type foundry, such as FF Meta Web Pro .
http://www.ascenderfonts.com/webfonts/ – This is a newer service from the company that provides all of the fonts that Microsoft uses, such as the new Calibri, in addition to other fonts from the foundry.
http://code.google.com/webfonts – Uses only commercially available free fonts of generally mid/low quality. However, their web font API is compatible with both Typekit and Ascender’s services, so it is worth looking into from a technology standpoint.
http://www.fontsquirrel.com/ – Mostly the same types of fonts as Google’s due to the same open source nature of the typefaces. Their @font-face web font generator can take any freely licensed font and turn it into a web font compatible resource, but you must make absolutely sure that you have a license that allows for this.
Non-web-font recommendations:
If you want a more traditional font recommendation using fonts that are on everyone’s computers and will give the highest performance, I would use Georgia for headlines and Verdana/Tahoma for text. They are universally available, yet of #1 quality and style. (You could also reverse them, as Georgia also makes an excellent body copy typeface.) Their only negatives are their ubiquitous nature, meaning that they’re practically invisible for end users because they see them so much.