The best way to specify fonts is by using css.
The css property is font-family. The value is a list of fonts, separated by commas. The last font in the list should be one of the 5 generic names. The browser goes through the list in order and uses the first one which it finds that is installed on the system. Font names which consist of more than one word are usually enclosed in quotes. Quotes should not be used for the generic names because these are CSS keywords. An example:
body { font-family: "Arial Unicode MS", Arial, sans-serif; }
Or you can specify a style within the html:
<span style="font-family: 'Arial Unicode MS', Arial, serif;">
The deprecated equivalent html tag is <font face="Arial Unicode MS, Arial, sans-serif">
Fonts and their names are copyright. Even common names are often not the same across platforms. If you are specifying the fonts on web pages, it is therefore important to find out which fonts are commonly available on other operating systems where your web pages will be viewed.
Information about the fonts which are available on Windows and Mac platforms
If you are working with a page that only uses characters from Basic Latin and Latin-1 Supplement, it should be ok to specify fonts and have some control over the appearance of your page. However, if you want to use other characters, it is often safer not to specify the font and let the browser do the work. Even if you test with the font on your system, remember that earlier versions of the font or versions on other platforms may not have the same glyphs.
On the other hand, for certain characters it is important to specify the font. This applies, for example, to characters which Internet Explorer displays as "Latin-based" but which are not common in Latin fonts, for example the IPA.
If you display characters outside the usual ranges on buttons, it is also important to specify the font. See below about Form Elements to understand why.
Penn State University gives more information about this dilemma and suggestions for specific circumstances.
This information relates to Internet Explorer 6 on Windows.
In Internet Explorer 6, the settings are under Tools, Internet Options, Fonts. The drop-down list here is for "Language script" which isn't quite the same as encoding. There is an option for Latin-based but none for Unicode.
When installed, the default Latin-based font for Internet Explorer is Times New Roman.
Apparently Internet Explorer 5 has problems - see http://home.att.net/~jameskass/utf8ornot.htm
This information relates to Firefox 1.0 on Windows.
In Firefox, the settings are under Tools, Options, General, Fonts & Colours. The drop-down list of "Fonts for" includes Western, Central European and Unicode. It isn't explicit, but I assume that these refer to the encoding.
Under "Languages" there is also a setting for "Default character encoding". I'm not sure how this is used.
For a page with UTF-8 encoding, it seems that Firefox uses the specified font where possible, but if it does not contain the required glyphs, it takes these from another font on the system. I don't know what the exact mechanism for this is.
The Penn State University page on other browsers gives information about configuring these.
symbol or unicode
Fonts vary in which Unicode ranges they support. Alan Wood has information about which fonts include what, but it does not refer to different versions of the fonts.
See Fonts for the IPA.
See Fonts for Pinyin.
See Fonts for Hungarian.
For a <textarea>, Internet Explorer uses the font specified for the Plain Text Font in its Options. Firefox/Mozilla uses the font specified as Monospace in its Options.
In both Internet Explorer and Firefox/Mozilla on Windows, the default font for the other form elements is not one of the fonts specified in the browser options. This applies to buttons, whether created with <button> or <input> and to the <optgroup> and <option> items in a <select> element. I need to check again about text boxes.
(Mozilla/Firefox applies <optgroup> and <option> slightly differently from Interent Explorer.)
In Internet Explorer the font depends on the character set of the page. For iso-8859-1, MS Shell Dlg is used. For utf-8, "Arial" is used.
Firefox/Mozilla uses MS Shell Dlg for either character set. If the required glyph does not exist in this font, where possible, it uses a glyph from another font. I'm not sure of the precise mechanism for this, but on my test page it uses "Arial Unicode MS" if that is installed, and Lucida Sans Unicode if not.
See utf-8 example.
See iso-8859-1 example.
This method of tont selection applies even if a different font is specified for a parent element.
In Firefox/Mozilla but not in Internet Explorer, the following gets these elements to use the same fonts as their parent :
input,button,textarea,select,optgroup,option { font-family: inherit; }
This use of "Microsoft Sans Serif" for MS Shell Dlg can cause problems if the form elements require glyphs which are not in this font. This problems is exacerbated by the different versions of the font. The version which ships with Windows XP has many more glyphs than the one shipped with Windows 2000. In Windows XP it has most of the Unicode IPA extensions, but it doesn't in Windows 2000. So a glyph may display fine in Windows XP but not in Windows 2000.
If any of these form elements require non-ascii glyphs, it would be better to specify the font for them, either by using the appropriate selectors (input,button,textarea,select,optgroup,option) or a class.