Font family (HTML)

From Wikipedia, the free encyclopedia

In HTML and XHTML, a font face or font family is the typeface that is applied to some text.

The font family and other presentational attributes of fonts are applied in HTML code using Cascading Style Sheets (CSS) or the deprecated HTML font element.

<p style="font-family: times, serif">Sample text.</p>

Using the deprecated HTML font element code:

<p><font face="times, serif">Sample text.</font></p>

It is common for publishers to define a list of font families to use when rendering text. These are listed in preferential order, separated by commas (as can be seen above). In this situation, the term 'font-family' (of in the case of HTML, 'face') is often misunderstood to mean the collection of possible fonts to use when rendering the text (be it on screen, on a printer or otherwise). In fact the list is that of several different font families, each family being of similar fonts. Thus the Times family includes different styles (like upright and italic), and weight (like normal and bold). The last family specified is usually one of the five generic families defined in HTML and CSS, to allow the text to be rendered appropriately even if the specified fonts are not available on that system.

The generic font families defined in HTML and CSS are:

Serif:	The quick brown fox jumps over the lazy dog.
Sans-serif:	The quick brown fox jumps over the lazy dog.
Cursive:	The quick brown fox jumps over the lazy dog.
Fantasy:	The quick brown fox jumps over the lazy dog.
Monospace:	The quick brown fox jumps over the lazy dog.

(Under Windows API, they are identified as Roman, Swiss, Script, Decorative, and Modern, respectively).

There may be many other font families; however, you cannot expect them to be universally supported. Just see what your browser can make out of it:

Times:	The quick brown fox jumps over the lazy dog.
Roman:	The quick brown fox jumps over the lazy dog.
Garamond:	The quick brown fox jumps over the lazy dog.
Palatino:	The quick brown fox jumps over the lazy dog.
Antiqua:	The quick brown fox jumps over the lazy dog.
Minion:	The quick brown fox jumps over the lazy dog.
Helvetica:	The quick brown fox jumps over the lazy dog.
Swiss:	The quick brown fox jumps over the lazy dog.
Impact:	The quick brown fox jumps over the lazy dog.
Script:	The quick brown fox jumps over the lazy dog.
Decorative:	The quick brown fox jumps over the lazy dog.
Blackletter:	The quick brown fox jumps over the lazy dog.
Fraktur:	The quick brown fox jumps over the lazy dog.
Modern:	The quick brown fox jumps over the lazy dog.
Courier:	The quick brown fox jumps over the lazy dog.
Calibri:	The quick brown fox jumps over the lazy dog.

The actual appearance will depend on your browser and the fonts installed on your system. A default installation of Microsoft's Internet Explorer, for instance, always displays Serif and Times as Times New Roman, and Sans-serif and Helvetica as Arial.