• Home
• JavaScript Tutorials
• PhotoShop Tutorial
• Fonts - Typefaces
• Dingbat Character Map
• About
• Contact

Using Font and Dingbat Typefaces on the Web

Many people planning new web sites want to express their own style by using their favorite fonts on the site’s design. What many don’t realize is that the font specified for a web page must be installed on the web visitor’s computer if it is to appear on the web page. If the visitor’s browser does not have the font, it will substitute a default font. Let’s say you want to use your favorite font, Brush Script Std. (Maybe you are doing a website about the circus!)

This is what you want:

However, this is what web site visitors will see if they don’t have Brush Script Std:

Welcome to the Circus!
The circus is the place to see elephants, tigers, acrobats and clowns!

How to specify web safe fonts:
If you use and HTML editor, these combinations will already be in your program. Fonts are best defined in CSS styles. Using the font tag is a bad idea because it has to be repeated over and over again in your code. To learn more about CSS, go to http://www.w3schools.com/css/

font-family: Arial, Helvetica, sans-serif;
font-family: "Times New Roman", Times, serif;
font-family: "Courier New", Courier, monospace;
font-family: Georgia, "Times New Roman", Times, serif;
font-family: Verdana, Arial, Helvetica, sans-serif;

Using image replacement for special fonts
In order to ensure that your special font is seen by all who view your web site, the font has to be an image. Remember, you cannot rely on images for actual content. A visitor cannot highlight text with the mouse. If visitors want to copy and paste your text somewhere (say, to send your business name to a friend), they can't do it. Also, text in images cannot be read by screen readers, which handicapped people use to browse the web. Any text you have in your images will not be accessible to these people. Plus, some people browse with images turned off or their images blocked at work. Finally, search engines cannot read any text embedded in images.

Don't give up on your favorite font! Special fonts can be very useful in calling out emphisis and giving your site style. Image replacement is a great way to display any font you like for your logo, advertisements, or some of your headers.

1. Always use web safe fonts for your page's content (body copy).
2. Text headers and links should all use web safe fonts.
3. If you plan to use images for some of your text, then it's safe to use other fonts. However, you should never use images for all of your text. Images for text should be used sparingly.

To make your image more accessible:

• remember to use Alt text
• You can place your image in a div that is given an absolute position image on top of text
• Mezzoblue offers instructions on the image replacement technique
• More on this topic:
  • Top 10 Web Safe Blogging Fonts
  • Knowing About Web Safe Fonts