By default, browsers display text using the font specified in the browser's settings (usually Times New Roman). However, you can specify that text be displayed in other fonts.
Fonts are typefaces, such as:
Before we get into this and subsequent html exercises that use the <font> tag, please be clear about the following. The font tag is deprecated, meaning that it is no longer recommended for use by the official organization responsible for making such rules, The World Wide Web Consortium.
If you click on the preceding link and go to that page, you will see a list of all html 4 tags. If you look under the Depr column, you will see those tags that are deprecated (D). This does not mean that they are not used on the Web. The font and center tags can still be found, but their use is rare. Of course html5 is the latest version of html, but it has yet to be finalized. It is also phasing out some tags and attributes that are still used.
Then why am I having you use them? Because I want you to learn html, not css, at least not yet. Formatting of the kind that had been done with the font tag is now done with CSS. However, I find that using the font tag is a very good vehicle for teaching html. Also because many of the attribute values that are used with it are also used by css, such as groupings of fonts and hexadecimal coloring. I don't want to complicate your life with more than you might be able to handle (css) yet because I think it may be difficult for beginners to keep the two styles of coding discrete, at least initially. So, please keep in mind that using the font tag here is more to acclimate you to html and some of the value types that are used in css.
In this, and the subsequent exercises, I use the font tag to both familiarize you with:
Originally, html was intended to be used to identify types of information and not appearance. It is referred to as semantic tagging.
A header tag ( for example, <h1> ) is a good example. Although browsers will make the text that appears within h1 tags appear visually big and bold, blind people who use Web page readers (example: Thunder screen reader; IBM's Home Page Reader; WebbIE Reader ) will not see that of course. However, the readers for the blind can "say" those items marked as headers in a manner that will set those words apart from other normal text.
Cascading Style Sheet (CSS) code was devised as the means to format Web pages while leaving the html code to do nothing other than place objects on a page and designate different types of information. For example, <p> means that it is a paragraph of text. The <hr> tag inserts a horizontal line ("horizontal rule") to clearly separate information.
CSS is intimately related to html. CSS cannot be applied without using html tags. CSS's sole purpose is to format web pages so that html is not needed for formatting.
View the source on this page, which I came across in an arbitrary search, and use Ctrl-F (Cmd-F) to search for an opening angle bracket followed by the word font:
<font
...and you will see the following tags and attributes:
<font size="2" color="#ff6600">
<font size="4" face="Georgia" color="#000000">
Also try this page where you will find lots of font tags, such as:
<font color="#660099">
<font face="Arial" size="2">
Admittedly, these are "Mom and Pop" type sites. Sites like these often include a mixture of deprecated tags and css, generally because they have been given occasional modifications, but not an overall redesign and rebuild. You may find yourself having to edit a page like them, so it's good to know about the font tag for that reason too.
The font attribute values will be applicable whenever you come to learn CSS. It will be easier for you learn CSS by using the font tag and its attributes now. Once you have a grasp of this older method, understanding CSS will come easier to you I believe.
To sum up, although the font tag is not supposed to be used, it continues to be used on the Web occasionally. But using it now we can learn more about text formatting without needing to learn a new coding syntax.
You list the fonts you want within the <font> tag using the "face" attribute.
Fonts (a.k.a. typefaces) can be specified for a few words or let ters.
Fonts can be set for a sentence or a paragraph.
You can list more than one font: if the first font isn't available in the viewer's system, then the browser will try to display the next one listed, and then the third, and so on. It is a standard practice to list several optional fonts for this reason.
It is also a common practice to end the list of preferred fonts with either "sans-serif" or "serif" as your last-ditch effort to get the fonts to appear at least remotely the way you want them to appear. All fonts are either serif or sans-serif.
"Sans" means "without" in French. For those of you who don't know what a serif is, they are the little extra doodads that appear on the tops and bottoms of some letters. It is best to show you what I mean.
The following example uses an upper case "M" first with serifs and then without:
This M has serifs.
This M does not have serifs (sans-serif).
If none of the fonts listed are available in the viewer's system, then the browser will opt for the browser's default font.
Internet Explorer for Windows:
Tools > Internet Options >Fonts...Firefox for Windows:
Tools > Options > ContentFirefox for Mac:
Firefox menu > Preferences > ContentSafari:
Safari menu > Preferences> Appearance
Take a look at what your browser is set to now. There are usually two default fonts: the other one is called either a Plain Text or Monospace font and is usually set to Courier New. This is used for displaying text inside <pre> tags which you will learn about later.
Remember to be careful when specifying fonts, the viewer may not have the one you specify. Avoid exotic fonts.
© 2011 Dan Vaughan and its licensors. All rights reserved.
Last full update: Feb. 2011