Make your own free website on Tripod.com

So, you want
Different Fonts?

By Kushinator

       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.

       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.

       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.

       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.

Six Digit Color Codes
Soft Colors


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.

This is a FACE example.

This is a SIZE example.

This is a SIZE example.

This is a COLOR example.

This is a COLOR example.