Font-o-matic

HTML and CSS font previewer

Version 1.0 , presented by Webmistress101.com

Pick a font for the paragraph below:

This script works by setting the font attributes of the BODY tag, which sets the base font used by all tags on the page. It uses CSS to change the fonts, but if you are still using FONT tags in Dreamweaver, it gives you a quick way to see how things look when you tweak the fonts and sizes.

This paragraph is a test. It's written to be long enough to wrap around, so that you can see exactly what the line spacing is at different font sizes. That's important to know.This paragraph is a test. It's written to be long enough to wrap around, so that you can see exactly what the line spacing is at different font sizes.

It's also important to notice how the spacing between paragraphs changes proportionally when you change the font size. It's also important to notice how the spacing between paragraphs changes when you change the font size. It's also important to notice how the spacing between paragraphs changes when you change the font size. It's also important to notice how the spacing between paragraphs changes when you change the font size. It's also important to notice how the spacing between paragraphs changes when you change the font size.

 

These are samples of the fonts in the list (Dreamweaver's list of fonts):

default
Arial, Helvetica, sans-serif
Times New Roman, Times, serif
Courier New, Courier, mono
Georgia,Times New Roman, Times, serif
Verdana, Arial, Helvetica, sans-serif
Geneva, Arial, Helvetica, sans-serif

Arial
Helvetica
sans-serif
Times New Roman
Times
serif
Courier New
Courier
mono
Georgia
Verdana
Geneva

This is the appearance of some common tags when the font is changed in this fashion, including strong text:

Heading 1

Heading 2

Heading 3

Heading 4

  • List item
  • List Item
  1. number list item
  2. numbered list item

Note that the fonts which display on the browser are dependent on what fonts the user (or browser) has available. The above list of fonts should work in all browsers for all platforms, be careful about specifying fonts such as 'Comic MS Sans,' which won't be available on all computers. Also, there are marked differences in how different browsers handle the same fonts even on the same platform. Part 2 will show some examples.

Font-o-Matic Version 1.0, written by Mike Meyer on 1 Jun 2005. (Back to Webmistress101)