The Font Tag versus Cascading Style Sheets (CSS)

Why You Should Switch to Cascading Style Sheets for all visual styles

helvetica
Helvetica. © 2013 J Kyrnin - licensed to About.com

Have you looked at a very old website and seen an unusual <font> tag inside the HTML? Yes, many years ago, web designers would actually set the fonts of their web pages inside the HTML itself, but the separation of structure (HTML) and style (CSS) did away with this practice some time ago.

In web design today, the <font> tag has been deprecated. This means that the tag is no longer a part of the HTML specification.

While some browsers still supported this tag after it was deprecated, it is no longer supported at all in HTML5, which is the latest iteration of the language. This means that the <font> tag should no longer be found in your HTML documents.

What is The Alternative to the Font Tag?

So if you cannot set the font of text inside the HTML page with the <font> tag, what should you be using? Cascading Style Sheets are how you set font styles (and all visual styles) on websites today. CSS can do all the same things that the <font> tag could do, plus so much more. Let's examine what the <font> tag could do when it was an option for our HTML pages (remember, it is not supported at all any longer, so it is not an option) and compare how to do it with CSS.

Changing the Font Family

The font face is the face or family of the font. With the font tag, you would use the attribute "face" and you would need to place this through a document many, many times to set the individual fonts for each section of text.

If you needed to make a sweeping change to that font, you had to change every one of these individual <font> tags.

<font face="garamond, times">this font is not sans-serif</font>

In CSS instead of font "face", it's called the font "family". You write a CSS style that would set the font. For instance, if you wanted to set all the text in a page to Garamond, you could add that visual style like this:

body {
  font-family: Garamond, Times, serif;
}


This CSS style would apply the font family of Garamond to everything on the webpage, since every element in the document is a descendant of the <body> element. All of those elements would inherit this style unless given more specific styles. You will notice that there are multiple fonts named here. This is called a "font stack". The font that will be used is the first one in the stack (Garamond), but if that font is not found for some reason, the page will use the next font named (Times). If all else fails, the font stack ends with the generic font classification of "serif" and the browser will use whatever serif font it can find.

Changing the Font Color

As with the face, you use the "color" attribute and hex codes or color names to change the color of your text. Years ago you would also set this individually on text elements, like a header tag. 

<h1><font color="#9933ff">this font is purple</font></h1>

Today, you would just write a line of CSS

<h1 {
   color: #99ccff;
}

This is so much more flexible. If you needed to change the <h1> on every page of your site, you could make one change in your CSS file and every page that uses that file would be updated.

Out With the Old

Using CSS to dictate visual styles has been a standard of web designer for many years, so if you are indeed looking at a page that still uses the <font> tag, then it is a very old page and it needs to be redeveloped to conform to current web design best practices and modern web standards.

Edited by Jeremy Girard