Introduction Font Face Alternate Font Faces Font Face Survey

Font Size Headers Font Color

Font face and color depends entirely on the computer and browser that is being used to view your page.
So, if you have downloaded a marvellous font that you "adore", and use it on your page....there is a chance that the visitors to your page may not be able to see it, and their browser may display the default font!
Please be aware of this when designing your page. If a particular "rare" font is needed for your page title, for example, then it may actually be a good idea to create a graphic for it instead!

The font attributes are face, size and color.

To change any of the font attributes at any time within your page, simply use the <font> tag. The text that follows will remain changed until you close with the </font> tag.

You can change any or all of the font attributes at the one time, by including all the required changes within the one <font> tag.

<font face="Comic Sans MS" color="#CC33FF" size="+2">
Changing the font face, color and size.</font>

Will appear as Changing the font face, color and size.

<font face="fontname">
Remember to always close with the </font> tag.

There are many interesting fonts available for you to use. The default font face is Times New Roman. Some font faces are
Times New Roman
Verdana
Comic Sans MS
WildWest
Bedrock

Now, all five of those font faces look different on my computer, but only two of them are different on my friend's computer!

Remember....if your visitor does not have your font installed on their computer, they will see the default font face instead.

So, I have conducted a series of a Font Face Surveys, so you know roughly which fonts are the most widely supported.

Now, we know that your visitor will only be able to see your font if they have that font installed on their computer. So, it is possible to specify two or more font face alternatives by listing the font face names, separated by a comma.

<font face="arial,helvetica">
<font face="Lucida Calligraphy,Comic Sans MS,Lucida Console,PrawnHandwrite">

When your page is loaded, their browser will display the first font face that it has available. If none of your selections are installed....then it will display the default font face.

There are two ways to change your font size. SPECIFY THE ACTUAL FONT SIZE <font size="n"> where "n" is a number from 1 to 7.
Remember to always close with the </font> tag.

Font size="1"
Font size="2"
Font size="3" ...this is the default font size.
Font size="4"
Font size="5"
Font size="6"
Font size="7"

SPECIFY THE RELATIVE FONT SIZE. <font size="+n"> or <font size="-n">.
Basically, you are specifying how many sizes larger or how many sizes smaller than the preset font size.

Font size="-2"
Font size="-1"
Font size="+1"
Font size="+2"
Font size="+3"
Font size="+4"
This is the default size for this font.....now I can change the size with
<font size="+3">to make it larger, </font> or
<font size="-2">to make it smaller </font>

I have included headers in this section on fonts, even though they are not actually part of the font tag.

Headers are different sizes of font that can be used for headings (surprise!)
The text enclosed within the <h1> and </h1> tags will be in bold type, and will be on a separate line from the rest of the text.

There are 6 different sizes of headers. You specify the size by using <h1>....(or 2,3,4,5 or 6) and you must always close with the matching </h1>....(or 2,3,4,5 or 6) tag.

Size 1 header

Size 2 header

Size 3 header

Size 4 header

Size 5 header

Size 6 header

ALIGNING HEADERS

Headers default to the left, but if you add align=right to the header tag, then it will form on the right hand side of your page.

<h3 align=right>Size 3 header align=right</h3>

Size 3 header align=right

Font colors can also be changed for effect and impact.
You can specify the color that you want by either the color name or hexadecimal code for that color.

COLOR NAMES

<font color="colorname">.
Remember to include the ". Some browsers will interpret the color without the ", some will not....it is always best to include it!
You must remember to close with </font>

Note....these color names may not be recognised by all browsers.
Some examples of font color names are:

For a listing of all the 216 Netscape colors, showing your selected color as a background, and also as a font color on selected different background colors, please go to my Color Palette page.