HTML Tutorials for the Complete Idiot
Has Relocated to a New Domain!
MyHTMLTutorials.com

Please make changes to any of your links/favorites to point this new location.

You will automatically be redirected to the new site in 10 seconds.

Heading and FONT Commands
So, you want a different font?
HTML Tutorials
By Jeff Walters

There are two common ways to setup the text of your home page. You can use the <Hn> command where n is any number ranging from 1 to 6 (1 creating the biggest text heading and 6 the smallest). Some examples are shown below.

This is heading size 1, the largest.

This is heading size 3.

This is heading size 6, the smallest.

Here's the code used.

<H1>This is heading size 1, the largest.</H1>
<H3>This is heading size 3.</H3>
<H6>This is heading size 6, the smallest.</H6>

Looks good right? Using Heading command is fine for most simple pages, but there are some problems. You can only change the size of the text and not the font. Also, you may experience problems trying to align the text with graphic images. Notice, headings seem to demand their space. So, let us consider another option; the <FONT> command!

Changing Fonts:

Changing the font of your text is really pretty simple. As you can notice from the title of this tutorial, fonts can help set the mood or theme of your page. The title of this tutorial was made using the "Kidprint" font. An example is shown below.

So, you want Different Fonts?

Here's the code that did it.

<FONT FACE="Kidprint" SIZE="6">So, you want Different Fonts?</FONT>

Notice that in this example two attributes or options were used, the FACE attribute and the SIZE attribute. The FACE option allows you to set the font you would like to use. But, what fonts can I use, you ask? That's a good question. If your using Window 95, then all of your fonts will be in the C:\Windows\Fonts\ directory (assuming C:\ is your main drive). Make sure to copy the name of the font exactly or it may not work.

Changing Font Size:

Ok, now onto the SIZE option. You can see from the example that you can also adjust the size of your text using the <FONT> command! You can set the font size to any number between 1 and 7, with 3 being the default. Unlike the heading <Hn> command, the font size 1 is the smallest and 7 is the largest.

Changing Font Color:

There is one more option that I would like to mention, it's the COLOR attribute. You can easily change the color of your text by adding the COLOR attribute to your <FONT> command. An example is shown below.

This is a color example!

Here's the HTML code.

<FONT FACE="Arial" SIZE="4" COLOR="#FF2222">This is a color example!</FONT>

Now, here is the part that stumps most people. In order to add the color option you need to know what the colors hexadecimal code is. Notice above, that the red I used had a hexadecimal code of FF2222. Also, make sure you don't forget to put the # sign in front. For more on hexadecimal codes, visit one of my other tutorials.

HTML Color Codes
Soft HTML Colors
HTML Color Chart

More examples:

Here's some more examples demonstrating the flexibility of the <FONT> command. The HTML code for each is shown indented and in bold. I hope this helps.

This is a FACE example.

<FONT FACE="Mistral">This is a FACE example.</FONT>

This is a FACE example.

<FONT FACE="Old English">This is a FACE example.</FONT>

This is a SIZE example.

<FONT SIZE="5">This is a SIZE example.</FONT>

This is a SIZE example.

<FONT SIZE="2">This is a SIZE example.</FONT>

This is a COLOR example.

<FONT COLOR="#007700">This is a COLOR example.</FONT>

This is a COLOR example.

<FONT COLOR="#000088">This is a COLOR example.</FONT>