One issue that web developers have dealt with since the beginning of the internet is fonts. Unlike print media, where what is printed on the pages of a magazine look the same to everyone who reads it, typography on the web is much harder to control. There can be hundreds or combinations of an end-user’s system depending on their computer setup; whether it is a PC or Mac, the monitor size, screen resolution, web browser, and installed fonts all affect how the text of a webpage looks on the end-user’s screen.

In the beginning of the internet, website designers had little more to choose from than whether to display a Serif or Sans-Serif font. Eventually more specific fonts could be defined; however there was no guarantee that the end-user had that font installed on their system. So a list of fonts in order of which was preferred would be defined, and in many cases is still used today. With CSS, a typical font style may look like:

A code like this will show Helvetica assuming the end-user’s computer has that font installed. But if the user does not have that preferred font, the browser would use whichever font on that list the user has, and if they don’t have any of those specific fonts, it would just display whatever sans-serif font is available. While this system works fairly well for most standard text blocks such as articles, it is not as ideal for headings or other areas where a more unique font might look better in a design.

There has always been an alternative way for web designers to display text in unique font. By creating the text as an image in a graphics program such as Photoshop, designers can use any font styling they want, and know that it will look the same on every user’s computer. And while this is a great thing to do for select images such as collages or other graphics heavy parts of a web page where the text is combined with an image, it is generally not recommended solely for the purpose of displaying text. Search engines will not be able to read the text from the image, and so they will not take them into account for SEO. It also cannot be read by computer programs that help people with disabilities read a website.

In recent years, there have been new advancements in web fonts. In 2004, almost a decade after the internet started becoming widely used, sIFR was introduced. sIFR stands for Scalable Inman Flash Replacement, named in part by its creator, Shaun Inman. This method uses the widely-distributed Flash plug-in to render text as a Flash object, so because Flash can embed any font style in the same way that an image can, this is a method to display fancier text styles to the end-user.
There are a couple drawbacks to using sIFR. The biggest being, while almost all users in 2011 do have the Flash player, there are still some users who don’t, or others who intentionally block Flash, and they will not see the fancier font text, they will just see the regular text style. Another issue is that, while usually not very significant, replacing text on the page with a Flash object can slow down the load time of the pages.

The newest and arguably best solution for web font replacement right now is called Cufón. It has been around almost four years, and is essentially similar in method to sIFR, but without the use of the Flash player, so it has the advantage of not requiring a plug-in. Cufón uses javascript, which is built into every modern browser, and the javascript file contains a font generator, which will generate and replace the regular text with the stylized fonts when the page is loaded.
Of course, Cufón is still not a perfect solution. As I recently realized when upgrading from Internet Explorer 8 to 9, many sites using Cufón do not show the text correctly in IE9. It turns out that the way Internet Explorer 8 rendered the javascript engine that display the fonts was different than the way it should have, and so Cufón needed to be updated to work properly in IE9. To update Cufón, download the latest version from their site, and update the cufon.js file on your web server with the latest release.

In the hopefully not-too-distant future, web fonts will be much easier and widely standardized than they have been up to this point. With CSS3 and its font-face property, it appears that the future looks bright for web fonts. But CSS3 still isn’t supported by the majority of currently installed browsers, so until computer users update their browsers en masse, for now, the solutions mentioned above will be the way to go to have visually appealing fonts on websites.