Styling Fonts with CSS
March 12, 2011
The FONT tag is dead. Long live CSS! Please help spread the word, too many people STILL have not gotten that memo and merrily use their deprecated font tags (along with the table-based layouts and improper doctypes). But now we all know – no more excuses.
The easiest way to apply a font style to your website, is right there with your body tag:
body { font-family: "Times New Roman", Times, serif; } |
And there you have it – now all the text on your page will be Times New Roman, and if that font is not installed on the viewer’s computer, then they’ll see the text in Times, and if they don’t have that either, then the text will display in whatever default serif font they have installed.
Side Note: Serif is the style with little hooks – for example 
opposed to 
(which is shown in Arial – see the difference?).
Do note the quotes around “Times New Roman” in the CSS above – that’s because that font name consists of more than one word. The quotes keep it together.
Sometimes, you may not want your entire page in one font, but might want your headers to stick out. Easy enough, just style them separately:
h {font-family: Verdana, Arial, Helvetica, sans-serif; } |
