Font Usage On The Web

Do you have a particular font that you want to use for the content area throughout your web site? Many people don't realize this, but for that font to appear on your site for all visitors, that font must be installed on the computers of all who are visiting the site. Otherwise, the text will be displayed in the default font for that visitor's browser.

Below is an example of several different fonts. The column on the left is text. In the unlikely event that those fonts are installed on your computer, they will match the image on the right. If you don't have the font, it will be displayed first as one of the default fonts specified in the template of this site. And if you don't have any of them, the font will be displayed as whatever the default font is for your browser (usually a font like Times New Roman).

Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text

The best approach is to choose several fonts that come with Windows, a font or two that is common on Macs, and a generic class of font just in case a visitor for some reason does not have any of the other fonts.

Let's say you can't stand "serif" fonts, such as Times. And as I mentioned earlier, Times is a default font on many computers. To absolutely ensure that Times (or any other serif font) is not displayed on your page, your fonts can be specified as follows:
verdana, tahoma, helvetica, sans-serif

If the fonts for a site are specified in the above order, this is how they would be displayed: First we have Verdana and Tahoma. They are fonts found on nearly all Windows systems. Tahoma, being specified second, would be displayed only if Verdana is unavailable. Helvetica is a serifless, or "sans-serif" font commonly found on Mac systems. And the last resort to prevent the visitor from seeing Times, we have "sans-serif". Even though there may not be a font called "sans-serif" on the visitor's computer, their computer will know to display a default font that is sans-serif, rather than serif.

Below are some examples of common fonts... If you are using Windows XP, all of the fonts below should appear exactly as they do on the right. For those of you on Macs, Helvetica and Chicago most likely don't appear to be the same as the image, but instead, they're likely being displayed correctly on the left since those are common Mac fonts. This page was written on an XP Pro machine with a font called helvetica, so Chicago in the image is rendered as Verdana, the site's default font at the time of this writing.

Arial Verdana Tahoma Times Comic Sans Courier Helvetica Chicago

If you must display an unusual font, it is best to keep it small, such as a header, and display an image rather than text. With images, you know that the visitor is seeing your text as you intended. You should however avoid displaying an entire page of text as an image unless for some reason it is absolutely necessary.

Embedding Fonts
There is a way to display unusual fonts as text on a webpage. It is called embedding the font. In this method, a special web version of the desired font is online with the rest of the site's assets. The fonts are downloaded and rendered on the page as the page loads. The font is displayed correctly in the visitor's browser as if it was installed on their system.

We recommend only embedding fonts if you simply cannot live with a more common font. There are a few reasons... First, the method only works in certain browsers. Now those certain browsers are still among the most common, but you'll experience the same problem you'd have without embedding with the visitors using other browsers. Second, embedding the font makes your pages take a little longer to load (because the font must be downloaded first). And again, that's only for visitors with compatible browsers. Other browsers will simply ignore the embedding and display the page with another font. And lastly, a minor problem we've noticed with font embedding... Well, sort-of minor; we were going to use embedded fonts on this site if it wasn't for this problem... Pages that use embedded fonts seem to have no consistency in the way they are rendered on the page. Sometimes a single line of text is displayed properly, sometimes it is stretched and wraps to a second line, and sometimes it gets stretched and is cut off by the right side of a cell containing the text! And this inconsistancy wasn't from multiple visits to the same page, or even with different browsers. We loaded pages, and each time we refreshed the page, the text would appear differently. It would be a very minor problem is it wasn't for the fact that sometimes text can be cut off. That just looks bad. So until there is a new, more universally supported standard for font embedding, we try to avoid them unless they're absolutely necessary.