Ray's Test Pages - User Changeable Options - Fonts

Ray's Test Pages - User Changeable Options - Fonts

For a while now I've been looking at ways to brighten up the design of the site. In the end I decided that this site will be one of the most user configurable on the Internet. I want the visitor, if they want, to be able to choose their own menu type, background image or colour, and font type and colour. I want them to be able to choose if they want the change in style to apply to the site while they are visiting just for this session or to remain persistent and remain the same each time they visit it.


I'd like the visitor to be able to choose a font type and size from a list or table, or be able to use a font from their own computer.

There isn't a way to collect information about the fonts installed on a user's computer. There is but it only works for Windows based machines - see http://www.gemal.dk/browserspy/fonts.html So probably the best thing to do is to provide a short list of fonts for the user to choose from. I'll also include instructions on how to change the default page colour and fonts using the browser options. The font size should be easier to do, just a drop-down list of point sizes from 8 to 14 or 16. The font tag is depreciated in HTML 4.01 but this is the only way I can see of doing this.

There are other things to think about. Do I give the user the choice to use things like bold, italics or underline styles for the fonts, especially for the headings? Do I make the headings and subheadings 1 or 2 point sizes larger than the main text or do I give the user the opportunity to use what font sizes and styles they like for each individual page element?

It is possible to change certain aspects of a dropdown list box appearance.

The code for the drop down box above is ...

<form><p align="center">
    <select name="select1">
      <option value="0">Arial
      <option value="1">TNR
      <option value="2">Antigoni
      <option value="3">Balloon
      <option value="4">Comic

The entire background colour and font can be changed by putting a style into the select statement. If you have the font installed, the text in the dropdown list box should be in Comic Sans MS. This works on Windows with IE v6, Mozilla v1.4, Netscape 7.1 and Opera v7.11

The code for the above dropdown list box is ...

<form><p align="center">
   <select name="select1" style="background-color:#FF0000; font-family: Comic Sans MS; font-size: 16pt;">
      <option value="0">Arial
      <option value="1">TNR
      <option value="2">Antigoni
      <option value="3">Balloon
      <option value="4">Comic

It is possible to change the colour of each option by using "style" inside the option. This does not work in Opera v7.11

Part of the code for the above dropdown is ...

<form><p align="center">
    <select name="select1" style="font-size: 15px;">
       <option value="0" style="background-color:#FFFFFF;">White FFFFFF
       <option value="1" style="background-color:#FFB6C1;">LightPink FFB6C1
       <option value="2" style="background-color:#FF69B4;">HotPink FF69B4
       <option value="3" style="background-color:#FF0000;">Red FF0000
       <option value="4" style="background-color:#A52A2A;">Brown A52A2A

What I want to do is do display a short list of fonts using the name of that font to display each separate choice. The following code works in Mozilla v1.4 and Netscape 7.1 but not IE v6 or Opera v7.11

<form><p align="center">
    <select name="select1">
       <option value="0" style="font-family: Arial;">Arial
       <option value="1" style="font-family: Times New Roman;">TNR
       <option value="2" style="font-family: Antigioni;">Antigoni
       <option value="3" style="font-family: Balloon Bd BT;">Balloon
       <option value="4" style="font-family: Comic Sans MS;">Comic

Another idea to display these fonts may be to put them in a table ...


On my computer On your computer
Arial This is Arial
TNR This is TNR
Antigoni This is Antigoni
Balloon This is Balloon
Comic This is Comic

The centre column are actually images made with 12pt fonts on my own system. The third column is text using, hopefully, the fonts on your system - if you've got them loaded, otherwise they should display in the default font.

The most common fonts seem to be ...

serif - Book Antiqua, Georgia, Palatino, Palatino Linotype, Times New Roman, Times

sans-serif - Arial, Avant Garde, Century Gothic, Comic Sans MS, Helvetica, Impact, Optima, Omega, Tahoma, Trebuchet MS, Univers, Verdana, ZapfHumanist BT, Zurich BT

monospaced - Courier, Courier New

The following table contains some common fonts. The way the font appears in the table is the way the text will appear on these pages. If the font appears in your default font it means that it isn't installed on your system.

Antigoni Cooper Md BT Garamond Lydian BT Tahoma
Arial Courier Georgia Microsoft Sans Serif Technical
Balloon Bd BT Courier New Goudy Old Style MS Sans Serif Times New Roman
Book Antiqua Elegance Light Gourmand Optimum Trebuchet MS
Bookman Old Style Europa Humanist521 Lt BT Palatino Linotype Verdana
Century Gothic Eurostar Impact Palermo Windsor
Century Schoolbook Footlight MT Light Lucida Console Parisian BT ZapfHumnst BT
Comic Sans MS Futura Lt BT Lucida Sans Unicode Swis721 BT Zurich BT

Simply click on one of the cells above and the font used for the heading at the top of this page will change to that font.

The user may also type in the name of a font that is installed on their own system to change the font. The font typed in must be the same as how that font reports itself to the operating system. The best way of doing this is to open up a word processor or something similar and see how the fonts are reported there.

Type the font you want to use here

Click here to bold the chosen font

While testing the code I came across an interesting thing. The code used to change the font face is

<script language="JavaScript">
//User supplied font name
function ChngFnt(ChosenFont){

with the tags defined as

<p><H1 id="Hd1" class="Hd">Ray's Test Pages - User Changeable Options - Fonts</H1></p>

the problem was that the code to make the font style, weight and text decoration change by using


didn't work. Later on, I found that by changing the ID line to

<span id="Hd1"><p>Ray's Test Pages - User Changeable Options - Fonts</p></span>

it did.

textDecoration can have the following attributes :-

underline - Text is underlined.
overline - Text has a line over it.
line-through - Text has a line drawn through it.
blink  - Not implemented by IE.
none - Text has no decoration.

fontWeight can have the following attributes :-

normal - Default. Font is normal.
bold - Font is bold.
bolder - Font is heavier than regular bold.
lighter  - Font is lighter than normal.
100 - Font is at least as light as the 200 weight.
200 - Font is at least as bold as the 100 weight and at least as light as the 300 weight.
300 - Font is at least as bold as the 200 weight and at least as light as the 400 weight.
400 - Font is normal.
500 - Font is at least as bold as the 400 weight and at least as light as the 600 weight.
600 - Font is at least as bold as the 500 weight and at least as light as the 700 weight.
700 - Font is bold.
800 - Font is at least as bold as the 700 weight and at least as light as the 900 weight.
900 - Font is at least as bold as the 800 weight.

fontSize has abundant choices percentages, ems, points and picas see





I like the thought of using the fontWeight numbers 100 to 900 and the fontSize in points 8 to 72. Perhaps both allowing the user to put their own numbers in. As with other drop down list boxes this can be coded individually, but I think it may be better to do it programmatically. In the fontWeight menu add the words "Normal" at 400 and "Bold" at 700. The fontSize drop down box should only use even numbers but allow the user to type in the odd ones if they want. Or maybe use xx-small, x-small, small, medium, large, x-large, xx-small.

If you've any suggestions, help, advice, bits of code, whatever please email me at brisray@yahoo.co.uk

Images - the page where the best of the image selection code ends up

Test Page - where most of the testing is done

Colours - Page 2 - page for testing CSS and other groupings

Other Websites

Webtek Systems - what my site (or anybody else's) must NOT look like

This page created 31st December 2003, last updated 26th January 2004

GoStats stats counter