The Font Tag Versus Cascading Style Sheets (CSS)

Why You Should Switch to Cascading Style Sheets for All Visual Styles

Format
mla apa chicago
Your Citation
Kyrnin, Jennifer. "The Font Tag Versus Cascading Style Sheets (CSS)." ThoughtCo, May. 12, 2017, thoughtco.com/font-tag-vs-css-3466841. Kyrnin, Jennifer. (2017, May 12). The Font Tag Versus Cascading Style Sheets (CSS). Retrieved from https://www.thoughtco.com/font-tag-vs-css-3466841 Kyrnin, Jennifer. "The Font Tag Versus Cascading Style Sheets (CSS)." ThoughtCo. https://www.thoughtco.com/font-tag-vs-css-3466841 (accessed October 20, 2017).
lines of code
(Boskampi/Pixabay/CC0)

Have you looked at a very old website and seen an unusual tag inside the HTML? 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 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 tag should no longer be found in your HTML documents.

What Is the Alternative to the Font Tag?

If you cannot set the font of text inside the HTML page with the tag, what should you be using? Cascading style sheets (CSS) are how you set font styles (and all visual styles) on websites today. CSS can do all the same things that the tag could do, plus so much more. Let's examine what the 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 throughout 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 tags.

For example:

this font is not sans-serif

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

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.

this font is purple

Today, you would just write a line of CSS.

This is so much more flexible. If you needed to change the

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 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