If this is your first time using Font Tester you may find
yourself a little overwhelmed with all of the options, so that's why
I've written this quick step-by-step guide showing you how to get started.
1.) The first step in previewing your fonts is deciding which "View" you
would like to use. A "View" is simply a way or a "preference" of how you
would like text to be arranged on the screen. Font Tester allows you to
choose from 3 different types of "Views", a 3-Column View, a
2-Column View, and a 1-Column View. By choosing a "View" you are
basically deciding how many columns of text you would like to see on
the screen at one time. In this case, I am choosing a "3-column view" because
I would like to view 3 columns of text at once...
2.) After you've chosen a "View" you are comfortable with, the next step
is entering the text you would like to preview. Click on the "Edit Text"
link above the column of text which you would like to edit...
3.) This brings up the "Edit Text" dialog. Here you can type in the text
(or HTML) you would like to see previewed and choose which columns you
would like to update with that text. You can choose to update all 3
columns at once or you can update each column individually...
4.) After you've entered your text you can begin to edit the
CSS Properties for that column. First, you have to decide which column
of text you would like to edit by choosing the appropriate
Edit icon. Here I am choosing the icon for Column 1
because I would like to edit the CSS Properties for Column 1...
5.) After you've chosen the column you'd like to edit, you can begin to
edit its CSS properties. You simply go down the list of CSS Properties
one by one choosing your desired value for each property. The properties
which have a checkbox by their name are optional
properties. If you check the checkbox by their name you can enable the
property and choose a value for it. The properties that are left
unchecked (when you press "Get CSS Code") are not included in your
generated CSS code. For a detailed explanation of what each of the
properties does, you can check out the section of the help manual
entitled CSS Properties.
6.) After you've finished choosing all of your properties the final step
is to generate the CSS code necessary to reproduce those styles in your
webpage. To do that simply press the "Get CSS Code" link above the column
which you would like to see the code for...
7.) Once you've pressed the "Get CSS Code" button you should see the
"Get CSS Code" dialog appear which can be seen in the screenshot below.
This dialog allows you to choose which type of CSS code you would like
to generate (a Type Selector, a Class Selector, or an ID Selector) and
it shows you both your HTML and CSS code. All you have to do then is
simply copy and paste the generated CSS code into the CSS section of
your website and copy and paste the generated HTML code into the HTML
section of your website. I have also included convenient "Select All"
buttons underneath each of the textboxes to allow you to easily select
all of the text in each textbox...
8.) The last and final step is to paste your generated HTML and CSS code
into your document...
