Below is a chart of the Common Fonts used for web sites. These are fonts that come with Windows and Macintosh computers and a utilized by the browser for displaying type on web pages. If the font that you wish to use is not in this list, you must load the font files with your web page or specify an outside source for the fonts.

If a font name has a space, you need to enclose it in parentheses, for single name fonts, the parentheses are optional.

Windows Fonts, Mac Fonts, Backup Font: These color coded fonts represent the fonts available with Windows and/or Macintosh (Apple) operating systems. The backup font is a standard font for any operating system, but will generally not render the same as the original font. If you do not specify a font name for a backup, the browser will resort to its default font.

NORMAL "Arial", "Arial", "Helvetica", "sans-serif"
BOLD "Arial", "Arial", "Helvetica", "sans-serif"
NORMAL "Arial Black", "Arial Black", "Gadget", sans-serif
BOLD "Arial Black", "Arial Black", "Gadget", sans-serif
NORMAL "Comic Sans MS", "Comic Sans MS5", cursive
BOLD "Comic Sans MS", "Comic Sans MS5", cursive
NORMAL "Courier New", "Courier New", monospace
BOLD "Courier New", "Courier New", monospace
NORMAL "Georgia1", "Georgia", serif
BOLD "Georgia1", "Georgia", serif
NORMAL "Impact", "Impact5", "Charcoal6", sans-serif
BOLD "Impact", "Impact5", "Charcoal6", sans-serif
NORMAL "Lucida Console", "Monaco5", monospace
BOLD "Lucida Console", "Monaco5", monospace
NORMAL "Lucida Sans Unicode", "Lucida Grande", sans-serif
BOLD "Lucida Sans Unicode", "Lucida Grande", sans-serif
NORMAL "Palatino Linotype", "Book Antigua", "Palatino", serif
BOLD "Palatino Linotype", "Book Antigua", "Palatino", serif
NORMAL "Tahoma", "Geneva", sans-serif
BOLD "Tahoma", "Geneva", sans-serif
NORMAL "Times New Roman", "Times New Roman", "Times", serif
BOLD "Times New Roman", "Times New Roman", "Times", serif
NORMAL "Trebuchet MS1", "Trebuchet MS", sans-serif
BOLD "Trebuchet MS1", "Trebuchet MS", sans-serif
NORMAL "Verdana", "Verdana", "Geneva", sans-serif
BOLD "Verdana", "Verdana", "Geneva", sans-serif

The syntax for specifying a font family for your text is as in the following example:

h1 {font-family:"Trebuchet MS1", "Trebuchet MS", sans-serif }

Adding Custom Font Names using @font-face

If you wish to use a font other than these standard fonts, you must somehow get the font files to the visitor's computer. To do this you need to either tell the browser where to find the fonts offsite or load the font-files along with your files.You font files should contain filetypes for the various browsers and mobile devices. If you fail to do this, your font may not display as you wish and the browser will use the backup font or its own default font.

To use your own font files for your site, you must have the legal righ to distribute these files. Some fonts are free to use commercially and other fonts can be purchased for use.

To instruct the browser to upload your font files for use on your web pages, you can use @font-face as in the following example:

@font-face {
    font-family: '1942_report1942_report';
    src: url('1942-webfont.eot');
    src: url('1942-webfont.eot?#iefix') format('embedded-opentype'),
         url('1942-webfont.woff') format('woff'),
         url('1942-webfont.ttf') format('truetype'),
         url('1942-webfont.svg#1942_report1942_report') format('svg');
    font-weight: normal;
    font-style: normal;
}

Adding Fonts From an Outside Source

If you wish to have the browser fetch the font files from a 3rd party site, such as Google, you must provide a link to the location, as in the following example:

<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

Watch that you also specify any special font weights, italic versions or special characters for your language.

Once this link is provided, you can then specify this custom font in your styling, such as shown below:

h1, h2 {font-family: 'Roboto', sans-serif;}