Fonts - Browser Safe Fonts & CSS

Nine "Web Safe" Fonts

  • Arial
  • Arial Black
  • Comic Sans MS
  • Courier New
  • Georga
  • Impact
  • Times New Roman
  • Trebuchet MS
  • Verdana

CSS "Generic" Font Names

  • serif  (ex. Arial)
  • sans-serif  (ex. Times New Roman)
  • cursive  (similar to script or handwriting)
  • fantasy
  • monospace  (ex. Courier New)

CSS Font/Text Properties

  • font-family - ex: font-family:Verdana, Arial, sans-serif;
  • font-size - xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, ##pt, ##%, ##px
  • font-stretch - normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
  • font-style - normal, italic, oblique
  • font-variant - normal, small-caps
  • font-weight - normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900
  • color - ex: color:blue; or color:#fff; or color:#fafafa;
  • letter-spacing - change the spacing between letters, ex: letter-spacing:12px; or letter-spacing:-0.5px
  • line-height - ex: line-height:1.5em; or line-height:150%;
  • text-align - left, right, center, justify
  • text-decoration - none, underline, overline, line-through, blink
  • text-indent - indents first line of text, ex: text-indent:30px; or text-indent:15%;
  • text-shadow - none, color, length
  • text-transform - none, capitalize, uppercase, lowercase
  • white-space - normal, pre, nowrap
  • word-spacing - change the spacing between words, ex: word-spacing:30px; or word-spacing:-0.5px;

How can I specify a specific font?

You can use CSS to specify a list of fonts in order of preference:

a { font-family:Tahoma, Helvetica, Arial, sans-serif; }

But there isn't a good way yet to force a certain font to be used in the browser. The browsers are generally limited to displaying the fonts that are installed on the computer on which the browser is running.

There are some initiatives (as of 2009-11-12) to set a standard for downloading and using a font but they are often OS dependent since the use of fonts has been an OS function in the past. I think the Google Chrome browser and maybe Mozilla/FireFox are working on some standards/systems. I would expect them to be the first to come out with something vs. Microsoft.

But for now, to show a specific font that is probably not on every visitors' computer you need to make a graphic/image of the text - which isn't good for SEO if you want the words to be there too. Or you can make a graphic of the font but then put the words in a <div style="display:none;"> div so the SE spiders see the text.

If you don't like "hidden" divs you can also use the <noscript>blah blah blah</noscript> tag which only shows the "blah blah blah" if someone has JavaScipt turned off in their browser. Few people do anymore since so many websites require it to work now.

Coding for big is <big> / </big>but what if I want it to be bigger than it shows with this coding what do I use please?

You can "nest" the bigs like <big><big>My Big Text</big></big> - this makes the <big> tags "additive" to make the text bigger than big.

You can also specify a specific size using the span tag and style attribute (which is becoming a more preferred method):

  <span style="font-size:16pt">My Big Text</span>

You can specify the "font-size" value in pixels or points (you can even use relative values like "large" and "small".

  <span style="font-size:18px">My Big Text</span>

  <span style="font-size:large">My Big Text</span>

For more information on the "font-size" CSS attribute see: http://www.w3schools.com/css/pr_font_font-size.asp

Bold tags end but the whole page is still bold!?

"It looks correct in IE, but there is bold text where there should not be in FireFox."

IE doesn't care where the ending tags go, FireFox and other web standards compliant browsers do.

What this means is you shouldn't overlap tags.

The tags: "<p><font...><b>..." should end in reverse order "...</b></font></p>" - that way none of them overlap like these do: "<p><b>...</p></b>".

In your first section you have:

<p><font color="#000033">This is my text that should be dark blue.</p><p><b><span style="font-size:22pt"><center>MY TITLE</b></font></span></center>... </p>

The first <font> tag does not end before the </p> tag, but ends inside a 2nd <p> tag: <p><font>...</p><p>...</font>... - overlap.

The same is true of your <b> bold tags which I think is what is causing the problem: <b><span...><center>MY TITLE</b></font></span></center>

This should be: <b><span...><center>MY TITLE</center></span></b>...

Or even better: <center><span...><b>MY TITLE</b></span></center>...

Generally you want to start and END "display" formatting tags like <b> and <i> within a "container" tag like: <p>, <blockquote>, <span>, <td>.

If you will be bolding 2 paragraphs you would want to do: <p><b>...</b></p> <p><b>...</b></p> so the beginning and ending <b> tags are within their containing <p> tags.

See if that helps.