Different fonts have different personalities. Properly using fonts to your web page will give your web page a vivid look, and will help your audience understand the message that you are trying to send even before they start to read the content. However, most of the great-looking fonts are non-standard fonts that are not installed to the computers of all your audiences. Special font displaying has been a big headache for all web folks in the past decade.

As I am just finishing up a project which involves with special fonts, I would like to share my hands-on experience in this area. Methods are listed below with pros and cons that were found from my latest experience. Anyway, after some research, you will find there are multiple ways to implement special fonts on the web pages. To summarize all these different methods, these are the two main ones - using text and using images.

1. Text method

This is a very appealing one. Thanks to the innovative JavaScript / CSS3, now we can show all special fonts by just typing in the text to the HTML code. Under this text display method, there are also multiple implementation ways, all of which need external files (javaScript files) though. Two of them I have been using are Google API and webfonts’ fonts-for-web tool. Both of them work great!

pros: This is so obvious -

1. easy to maintain. To update the text you don’t need to use any other applications/tools, all you need to do is just to pull out your HTML and change the text in there.
2. Since it’s text, the page load is minimized. Comparing to image, text on HTML page loads much faster due to its smaller size.
3. SEO friendly. As we know, search engine cares about the real content of the page more than what the meta tags say.Search engine crawls to the web page to get the info by reading text on the page. For image, in order to let the search engine know what it is about, we need to use ALT tag. But even if ALT tags are used, images don’t talk to search engine as efficiently as text.

cons:
1. Always need external files. Loading the external files from external domains, which will add more HTTP requests and  for sure affect the performance of the page, slow down the page load time.
2. For Google API, if you can find your fonts from that list, you are lucky. But overall, it’s a very small list, most of the great looking fonts are not in there. Collection is very limited for now. Hope they can add more fonts in the near future.
3. For webfonts, it’s actually an online subscription, you need to use their tool to generate the JS code. So they have the full control of the usage of the fonts, and the access you have to the fonts depends on the type of the membership you subscribed to webfonts. For free membership, the access is pretty limited, in terms of the page views per month and the number of fonts per page, etc.
4. Browser compatibility issues. Special fonts don’t look the same in different browsers. Modern browsers are developed in a way to display CSS2 pretty consistently. However, when it comes to special fonts, all the modern browsers have their own way to show those fonts. Fonts look very inconsistent even with the same browser but different versions. For example, Helvetica font looks good in Safari 5.0.1 but the line height looks so wrong in Safari 5.0.2. Same problem between FF 3.6.8 and 3.6.12, IE7 and 8, etc.
5. ok, now here comes the biggest problem to use text fonts. External files will cause Safari in ipad crash! Yes, external files from both Google API and webfonts will cause iPad Safari crash. So far, I don’t have any fix for this problem, but seems to me iPad Safari is much more fragile than any other browsers, improperly rendered JS code tend to kill the browser.

Basically item 4 and 5 are the showstopper for using this method.

In a nutshell, even though using text to display special fonts seems very appealing due to the pros listed above, it’s probably not time yet, for this method to come play the role, as we see a lot of the modern browsers are not ready for it. Cons number 4 and 5 are the major obstacles of this method. Therefore, using image is still the master stream to give the web page not only a nice look of the text, but also a consistent feel and experience across all browsers. So here comes the image method.

2. Image method

pros:
1. no browser compatibility issues at all. Images look the same on all browsers, no matter if they are modern browsers or not.
2. No need external file or JS coding which can burden the browser from loading the files on other domains.
3. No limit to the usage or access. As long as your computer has the font you want, you can use it however you want.
4. Never cause browsers to crash.

cons:
1. Hard to maintain. If you need to change the text, you have to use image editing tools. This takes much more time and cost than just updating the text in HTML.
2. Loads slower than text, due to the size. Also, images are external files as well, so to load one image, it take one HTTP request from the browser, which affect the loading time and performance. But as a designer, we should know images can be optimized, different types of images are for different format. Using image optimizing knowledge can produce high quality images while minimize the image sizes.
3. Not SEO friendly. Image itself doesn’t send any message to search engine. But if used properly, there are still ways to achieve almost the same result as using text.

While using text got two showstoppers, the major SEO issue of using images can be resolved. Here is the solution:
To address the issue that search engine recognize text content more efficient than looking at the image alt tags, we should still have the text that has been converted to image files entered in the HTML again. But remember, the text in the HTML is not supposed to show up on the page, it’s just for the SEO purpose only, while the image instead will display.  Examples are as follows:

HTML code:
<div class=”headlines”>
<h1>Your Personal Organizer.</h1>
<h2>The best way to stay in sync with your close friends and co-workers.</h2>
</div>

The associated CSS code:
.headlines {
background:url(”images/text_big_banner.png”) no-repeat scroll left top transparent;
height:133px;
margin:0;
width:513px;
}
.home_banner h1 {
display:none;
}
.home_banner h2 {
display:none;
}

Another tip of using images to show the text - transparent PNG 24 format for the images are recommended. This way, the images are independent with the background, and it has the best quality and image size among all the other image formats.

In summary, at the time being, although we have ways to show special fonts by using text and JS file and external libraries, this technology is not maturely integrated with the modern browsers yet. Image, on the other hand, can resolve all issues that text has. For other cons of using images, we still have ways to work round. Therefore, using images to display special fonts are the best solution so far.