Font family (HTML) Information & Font family (HTML) Links at HealthHaven.com

In HTML and XHTML, a font face or font family is the typeface that will be applied by a web browser to some text. The font is relevant for the display of text on the screen, on a printer or another device.

A font family and other presentational attribute of a font may be applied in HTML code in either cascading style sheets (CSS) or the deprecated HTML font element.

 <p style="font-family: times, serif; font-size:14pc; font-style:italic"> Sample text formatted with CSS. </p> <p><i><font face="times, serif" size="3"> Sample text formatted with the deprecated FONT tag. </font></i></p>

In CSS, a font-family (or face in HTML) in fact consists of a set of related fonts, grouped as font families. For example, the Times family includes different font sizes, styles (like roman and italic) and weight (like regular and bold).

The web browser will only be able to apply a font if it is available to it, which is not always the case. HTML code writers may list in preferential order font families to use when rendering text. The font list is separated by commas (as shown above). To avoid unexpected results, the last font family on the font list will be one of the five generic families which are by default always available in HTML and CSS. In the absence of a font being found, the web browser will use its default font, which may be a user defined one. Depending on the web browser, a user can in fact override the font defined by the code writer. This may be for personal taste reasons, but may also be because of some physical limitation of the user - such as the need for a larger font size, or the avoiding of certain colours.

[edit] Generic font families

The generic font families defined in HTML and CSS are:^[1]

Family	Example (browser dependent)
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, these families are identified as Roman, Swiss, Script, Decorative, and Modern, respectively.

[edit] Generic fonts

The font-family can use a specific named font (like Heisei Mincho W9) but the result depends on the installed fonts in the user machine. Font names must be quoted if containing whitespaces. The actual appearance will depend on your browser and the fonts installed on your system.^[1] 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.

Font	Example (dependent on installed fonts)
Times New Roman	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.
Comic Sans	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.
Verdana	The quick brown fox jumps over the lazy dog.
Frosty	The quick brown fox jumps over the lazy dog.
Georgia	The quick brown fox jumps over the lazy dog.
Avqest	The quick brown fox jumps over the lazy dog.

[edit] Notes

^ ^a ^b http://www.w3.org/TR/CSS2/fonts.html#generic-font-families

[edit] See also

[ccs-ref-0] ttp://www.w3.org/TR/CSS2/fonts.html#generic-font-families

[1]

Contents

[edit] Generic font families

[edit] Generic fonts

[edit] Notes

[edit] See also