Webmaster Resources Center

Welcome to the Bravenet Resource Center. Use these resources to help make your web pages more advanced and fun to use.

Articles & Tutorials

Replacing The Font Tag

by Jocelyn Kinnear


Summary :

Although it is widely used, the font tag is deprecated. If you catch yourself using a <font> tag, you should read this article and make sure that your website is up to date!

The following table shows the deprecated font tag attributes and the CSS equivalents. The table also shows the function of each attribute. The x's used in the examples represent other things. With the color, it is replacing a 3 or a 6 digit color code (also known as a Hex code) -- check out our color sheet here. With font-family, the x's represent the title of a font, such as Arial, Times New Roman, etc. With font-size, the 1x represents any number followed by a unit of measurement (in, cm, px, pt, etc).

Attribute: Function: Style Equivalent:
<font size="x"> Specifies a size of text font-size: 1px;
<font color="xxx"> Specifies the color of affected text color: #xxx;
<font face="xxx"> Specifies the font type of font font-family: xxx;

Inserting the styles is easy to do. Let's say we want to make the text in a paragraph blue (#00f), 12px tall and in Arial font. We would put the style "font-size: 12px; font-family: Arial; color: #00f;" into the p tag that will follow this paragraph. You can reference the sections separated by semi-colons (;) to the styles listed in the above table.

<p style="font-size: 12px; font-family: Arial; color: #00f;"> The text that follows the opening 'p' tag will be affected by it. All text that follows will be affected until the closing 'p' tag. </p>

And of course, the following text would be the result of the style.

The text that follows the opening 'p' tag will be affected by it. All text that follows will be affected until the closing 'p' tag.

The same style can be applied to a span or a div for the same effect.

<div style="font-size: 12px; font-family: Arial; color: #00f;"> Affected text. </div>
<span style="font-size: 12px; font-family: Arial; color: #00f;"> Affected text. </span>

Of course, these are just the replacement styles for font tags -- there are tons of styles that you can apply to your text using Cascading Style Sheets.

For more information about CSS and other coding tips, try our HTML/CSS Cheat Sheets... Go here to Learn More!