Most beginners to web design want to modify the fonts on their web page at some point. And the first thought is to use the <font> tag. But this tag has been deprecated in HTML 4 and doesn’t exist in HTML 5. And it is strongly recommended that you do not use it. Instead, you should use CSS for changing HTML fonts.
Why Avoid the HTML Font Tag?
You may be thinking, “the font tag is much easier than CSS”, but that is only superficial. There are some major drawbacks to the font tag:
- You don’t have as much control over your typography with the font tag as with CSS. The font tag only supports size, color, and family. But with CSS you can modify the style: make text bold or italic, even small-caps as well as changing the font family, color, and size. Plus CSS lets you modify the line-height, letter-, and word-spacing. Plus, CSS lets you justify and align text right, center, and left.
- You can only specify font sizes as 1-5 (where 3 is the browser default, 1 and 2 are smaller and 4 and 5 are larger) or as relative to the current font size (e.g. +1 or -2). By changing the font size with CSS, you can specify an absolute size (from xx-small to xx-large), a relative size (+1 or -2 like the font tag), an exact length using various measurements (em, px, inches, centimeters, etc.) or a percentage of the parent’s size.
- Every time you want to change the font on an element, you have to add in another font tag. This can result in spaghetti code that is hard to figure out as well as lots of extra characters. With CSS you can specify classes and IDs with special fonts as well as setting a default typography for your entire site.
Learn more about changing your page fonts with the article: Modify Fonts with CSS.
Fonts Common on Both Windows, Macintosh, and Linux
There are only a few fonts that are reliably found on both Windows, Macintosh, and most Linux computers. These are called web safe fonts. Some common ones include:
- Arial
- Arial Black (not typically on Linux)
- Bookman
- Comic Sans MS (not typically on Linux)
- Courier
- Courier New
- Georgia (not typically on Linux)
- Gill Sans
- Helvetica
- Impact (not typically on Linux)
- Lucida Console
- Palatino
- Tahoma
- Times
- Times New Roman
- Trebuchet MS (not typically on Linux)
- Verdana (not typically on Linux)
- Webdings
If you are going to change the font family of your text, you should have at least one of those options in your font stack. Here is a table of common Windows and Macintosh fonts and how they look: Comparison of Macintosh Common Fonts to Windows Common Fonts.
How to Change the Font with CSS
You can change the fonts on your web pages with CSS using a couple of different style properties:
- Change the font color
color: red; - Change the font size
font-size: 1.5em; - Change the font family
font-family: Arial, Helvetica, sans-serif;
