It’s All In the Family:

To specify a font, use the font-family: property. This is followed with a comma-delineated, list of fonts for the browser to try and load.

At a minimum, every browser will be able to render something when passed one of three default values:

  • sans-serif
  • serif
  • monospace

sans-serif

serif

monospace

Instead of using generic font class names, developers may also use specific font family names. When a specific font family is listed, the browser will try to load the font from the client computers font library.

For example, the following will cause the browser to first try and load “Comic Sans MS”. If the client computer (yours in this case) does not have a font matching that name, it will then try “Comic Sans”, then “Garamond”, then “Times”, then finally the default ‘serif’ font. The browser will do this by asking the client for the font. If the client doesn’t have the font, then the browser will try the next listed font.

Displayed Font

Web-Safe Fonts

Fonts that developers can count on being available by the system are known as “web-safe” fonts. These include font families that both Windows and Mac should have.

Web-safe fonts include:

  • Arial

  • Georgia

  • Times New Roman

  • …as well as these other web safe fonts.

The advantage of using fonts from this list is that the client computer will already have the font. This reduces load times and may increase performance.

{ TODO: }

Read page 269-273 of Chapter 12 in Duckett.


Previous section: