How To Put Special Fonts On Your Website

by
Jeff Colburn

I'm constantly asked by my clients to put special fonts on their website. Some want them for page titles or links, while others want them on their entire site. Unfortunately, this isn't as easy as you would think.

The main problem is that not everyone has the same fonts on their computer. I have just over 1,000 fonts on my system, but there's no guarantee that I have the font that you put on your website. So let's go over your options.

Select A Set Of Fonts
Your first, and easiest, choice is to select a series of fonts. You do this by putting a list of fonts in the HTML using the Font Face command. As a rule I use the following fonts: Arial, Helvetica, Geneva, Swiss, SunSans-Regular. These are rather common fonts that are found on most computers, both PC and Mac.

By listing fonts like this a computer will work its way down the list to find a font to use when displaying a web page. It works like this. The computer asks itself, "Do I have Arial? No. Do I have Helvetica? No. Do I have Geneva? Yes." Then the computer will use Geneva to display the page. This lets you have more control over how a page looks. If you didn't have a list, but say only Arial, and the computer doesn't have that font then it would display the page using whatever the default font is for the computer. That default font could be anything, but by listing the fonts in the HTML, you have a better chance of the computer using a font of your choosing.

I recently made a website where my client wanted the text links to be Papyrus font, and the body to be Goudy Old Style. So I used the above list of fonts, but put Papyrus or Goudy Old Style first on the list. This way, a computer would use these specialty fonts if they were on the system. If they weren't available, then the computer would select one of the other fonts I'd listed. It's not a perfect solution, but until there are uniform standards used by all computer manufactures (okay, you can stop laughing now), this is your best solution.

Using Graphics
Sometimes you will want to use a font that is very unique or where effects like beveled edges and shadows are used. Your only solution in this situation is to use a graphic. I use Photoshop to make title graphics and buttons that contain these features.

While you can make some beautiful images this way, there is the inherent problem of size. Graphics files can be small, but often aren't. But there are ways to deal with this. Remember that a web page should take no longer than 20 seconds to load with a slow dialup connection.

There are three ways to get a graphic to load quickly. The first is to repeat the graphic. It takes the same amount of time to load one copy of a graphic as it does to load one hundred copies of the same image. Once that image is loaded the first time, it can repeat on the page and appear instantly.

The second way to quickly load an image is to optimize it. This is a feature offered by most graphics programs. In Photoshop, it's called Save For Web. I often do this for clients, especially with images they send to me. It's not uncommon to receive images that are up to a megabyte in size. On a dialup connection, this one image would take about five minutes to load. But I have optimized images like this and been able to reduce them to 100K or smaller. So now the image would load in 20 seconds. This is still too large for a web page that may contain other images this size, but it's an improvement.

The final choice is to optimize an image, then slice it. You use a program like Photoshop to literally slice a large image into several smaller ones. For some reason, several small images will load faster than one large image; even if the smaller ones combined size equals that of the large image. Go figure.

As a side note, spiders that come to your site can't follow links that are graphics. So if your links are buttons, it will be impossible for spiders to find your entire site. It's best when using graphics for links to also include a set of text links on the page. These can be out of the way at the bottom of your page if you want. But the spiders can easily follow them so they can index your site and get you more traffic.

Have The Fonts On Your Website
Your final options I don't recommend, and I don't know anyone who uses them. This method either lets users load a font onto their computer, or embeds the font into your site.

I have gone to some foreign sites and had a window pop up saying that to properly view the site I need to download a font. This is usually a foreign language font, like Chinese, Russian or Japanese. When I say "No," the site usually shows up just fine in English. However, I would not let a site I've never been to load a file onto my computer. That's just asking for a virus.

The other option, when creating a website, is to use something like Open Type or TrueDoc. These programs let you use dynamic fonts or embedded fonts to display the font you want on any website.

The down side to these programs is that they make your web page larger, thus making the download time longer. The other problem is that there are two methods to embed fonts. One only works with Internet Explorer and the other doesn't work on Netscape 6 or Internet Explorer for the Mac.

The key to using special font, or almost any design layout, for a web page, is to remember that web pages aren't like Photoshop or other design programs. There are limitations to what you can do and how you can place things because your web page is appearing on other computers. These computers have different screen sizes and resolutions, fonts, number of colors displayed, browsers and browser versions and many other variables. So you do the best you can and hope for the best.

So decide which of the above options will best meet your needs to create a website that looks great to your client and the visitors to his site.

Do you want to learn how to make your website work for you and not against you? Then visit The Creative Cauldron NOW to find the answers to your questions, and achieve what you want in life. Go to www.TenCommonWebMistakes.com to download the FREE report "Ten Common Mistakes Found On Websites, And How To Fix Them."

Sign up for the free weekly Creative Quotes newsletter and receive two FREE reports.

Home    Resources    Be An Affiliate  Events   
Retreats    Blog    Articles    Dead    Library    Links    About Jeff