Webpage Fonts

Webpage Fonts are often misunderstood. People want to have their page look as attractive as possible and in doing so, they often use various fonts for the text. Using different fonts takes some understanding. First, the fonts displayed on a webpage are not determined by the "font" being placed on the page. The font is actually displayed by the browser causing the font which is located in the "visitor's" machine to be used. If the particular font the webpage maker chooses is NOT installed in the visitor's machine the font the visitor's browser will use will be the font the visitor selected to be the "default" font.

A "special font" (one not normally installed in the visitor's machine) must be made available for "download" at the webpage so the visitor can download and install it to view it.

Let's be realistic. How many pages do YOU view per day or even during the period of time you are surfing? What would you do if each webpage address required you to "download" a special font so you could view it? I don't believe many people would take the time and effort to do that to view a webpage. Most proabably most people will simply view the page using their browser's "default" font and move on after viewing.

Most machines come with a standard "batch" of fonts which allow for a variety of font styles and looks. Windows fonts are many and varied. When making your webpage it is probably best to make use of the available fonts on your machine and most visitors to your webpage will have those available.

So, assuming you are going to use the available fonts how do you ensure certain fonts are used in the places you want them to be used?

To set the size and color of any text on a webpage, use the tag.

Using the FONT tag the webpage author has a means of customizing how text appears.

<FONT FACE="Arial,Lucida Sans,Times Roman" SIZE=5 COLOR="purple"> This text will be big and purple. </font>

The FACE attribute allows the author to name the font used to display text. Up to three fonts, can be inserted, each to be used in the event that the preceding font is not found on the client browser's system. If the specified fonts are not found the client brower will use the default font selected.

The SIZE attribute can take any value from 1 (tiny) to 7 (fairly big), with 3 being the normal default size.

The COLOR attribute can take any of the following standard color name: black, white, green, blue, yellow, aqua, fuchsia, gray, lime, maroon, purple, navy, olive, silver or teal. You can also define the colors using the HEX values for colors which will give you more control over the colors and shades.

A resource you can use to select a color and convert it to a HEX value can be accessed by clicking this link.

Fonts for Titles, etc.

You CAN have "special" fonts for "titles and headers" which can be viewed by a browser without the installation of a font. To do this you must use a "graphic program" and construct an image file, either .gif or .jpg, using the font your want.

And example of a font used as an image file:

As you can see, I used two different fonts and two different sizes to make the .gif file above. I made the "title" using Paint Shop Pro and the regular fonts installed on my machine. You can make titles as "fancy" or "plain" as you want using a graphics program and some thought.

Further information about "fonts" can be found in an Advanced HTML Tutorial.



Main HTML Help

Site© 1996-2003 Copyright by dcrum@infionline.net