Step 6 – Using Fonts

Last update: February 15 2019

You can also make text stand out using FONT-tag. Among other options available to you, this will also allow you to adjust the size of the text.

Note: Though it’s great to know about this, usually we use CSS for this and, I predict, that the FONT-tag might get phased out sometime down the line.

Change Font Size

Adjust your text and make sure the following tag is being used: <FONT SIZE=4>.
Example:

<html>
<head>
<title>my own homepage</title>
</head>
<body background="images/background.gif"
bgcolor="#ffffe1" text="#808080" link="#ff9b6A"  vlink="#ff0000">
<p>Nora Tol started offering webdesign services since the <u>middle of the 90s</u> with her
first company <i>Nora Tol Virtual Publishing</i> and, now, with her second company,
<i>ElNorado Productions</i></p>
<p><u>By growing demand</u>, she expanded her services with designing logos, hosting,
online marketing and even creating online content.</p>
<p>Take a look at her website for more information.<br /><b><font size="4">Or get in
touch</font></b>.</p>
</body>
</html>

As you can see, the FONT-tag needs to be closed. All text between <FONT SIZE=4> and </FONT> will now be a size bigger than the rest. In most cases, SIZE 3 is pretty default. Still, you can never be sure. People can set their own defaults in the browser. They can also zoom in and out. This is why we love using CSS, where a font size is set in pixels or points. This is more uniform.

Anyway, you can enlarge text, like in our example, but you can also make it smaller (just decrease the value to anything smaller than 3). Even negative values (-1) will be shown by most browsers.

Change The Font Type

Besides adjusting the size you can also change the font itself. The default font used by a browser is mostly Times New Roman. I want to use Arial:

<html>
<head>
<title>my own homepage</title>
</head>
<body background="images/background.gif"
bgcolor="#ffffe1" text="#808080" link="#ff9b6A"  vlink="#ff0000">
<font face="Arial">
<p>Nora Tol started offering webdesign services since the <u>middle of the 90s</u> with her
first company <i>Nora Tol Virtual Publishing</i> and, now, with her second company,
<i>ElNorado Productions</i></p>
<p><u>By growing demand</u>, she expanded her services with designing logos, hosting,
online marketing and even creating online content.</p>
<p>Take a look at her website for more information.<br /><b><font size="4">Or get in
touch</font></b>.</p>
</font>
</body>
</html>

Using the FACE-attribute, you can change the font type. Every computer has a set of default fonts installed. These will always work. If you choose to use a font which only you have installed on your computer, you will see it, but your visitors won’t. That would be a shame. Because this was an issue for a long time, you can now install True Type fonts or use Google Fonts onto your website, but you have to use CSS to actually use it. Another reason why this FONT-tag will not survive the test of time.

Back to our code, though. As you can see, the FONT-tag is opened at the beginning of my text and closed at the end, even though I’m also using another FONT-tag. This is no problem at all. In HTML you can nest tags.

I could even set a different font size and have it get overwritten by the second FONT-tag, like so:

<html>
<head>
<title>my own homepage</title>
</head>
<body background="images/background.gif"
bgcolor="#ffffe1" text="#808080" link="#ff9b6A"  vlink="#ff0000">
<font face="Arial" size="2">
<p>Nora Tol started offering webdesign services since the <u>middle of the 90s</u> with her
first company <i>Nora Tol Virtual Publishing</i> and, now, with her second company,
<i>ElNorado Productions</i></p>
<p><u>By growing demand</u>, she expanded her services with designing logos, hosting,
online marketing and even creating online content.</p>
<p>Take a look at her website for more information.<br /><b><font size="4">Or get in
touch</font></b>.</p>
</font>
</body>
</html>

Despite the fact that the above might work, it’s very sloppy coding. Even if you would code it this way now, this would probably be a neater way to do it, because we consider the paragraph-tag as being in the lead, nowadays:

<html>
<head>
<title>my own homepage</title>
</head>
<body background="images/background.gif"
bgcolor="#ffffe1" text="#808080" link="#ff9b6A"  vlink="#ff0000">
<p><font face="Arial" size="2">Nora Tol started offering webdesign services since the
<u>middle of the 90s</u> with her first company <i>Nora Tol Virtual Publishing</i> and,
now, with her second company, <i>ElNorado Productions</i></font></p>
<p><font face="Arial" size="2"><u>By growing demand</u>, she expanded her services with
designing logos, hosting, online marketing and even creating online content.</font></p>
<p><font face="Arial" size="2">Take a look at her website for more
information.</font><br /><b><font size="4">Or get in touch</font></b>.</p>
</body>
</html>

Anyway, we’ll continue the course with the first example used on this page.

Go to Step 7

Bookmark the permalink.

Comments are closed.