Font family (HTML)

In HTML and XHTML, a CSS font family property is used to specify a list of prioritized fonts and generic family names; in conjunction with correlating font properties, this list determines the particular font face used to render characters. A font family is a grouping of fonts defined by commonly shared design styles.

Fonts sharing a common design style are commonly grouped into font families; Font Families' members are differentiated by a character's shape display (stroke weight, slant, relative width, etc.); A font face is the unique combination of a specific font family, and some of its members properties (CSS font properties).

A font face attribute, combined with other font presentation attributes may be applied in the HTML using the deprecated font element.

.text { font-family: times, serif; font-size:14pt; font-style:italic; } 
<p class="text"> Sample text formatted with CSS in a separate stylesheet. </p> <p style="font-family: times, serif; font-size:14pt; font-style:italic"> Sample text formatted with inline CSS. </p> <p><i><font face="times, serif" size="3"> Sample text formatted with the deprecated FONT tag. </font></i></p> 

A best practice for CSS font-family values is to delimit each in quotes as values with whitespace require it.

.text { font-family: "calibri", Garamond, 'Comic Sans MS'; } 

In CSS, a font-family (or face attribute in HTML) is a preferentially ordered list of font families to use when rendering text. The list is separated by commas (as shown above). To avoid unexpected results, the last font family on the font list should 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 avoidance of certain colors.

In addition to local fonts, modern web browsers support linking custom font files directly by using the @font-face declaration. Once included, such fonts can be listed in the font-family property, alongside all local and fallback fonts.

Generic fonts[edit]

The font-family can use a specific named font (like Heisei Mincho W9), but the result depends on the fonts installed on the user machine. The actual appearance will depend on the browser and the fonts installed on the system.[1] A default installation of Firefox on Microsoft Windows, for instance, will display both serif and Times as Times New Roman, and both sans-serif and Helvetica as Arial.

Usually only a small subset of them, chiefly the 'Serif', 'Sans-serif', 'Monospace' and 'Cursive'[2] are easily configurable by user in web browsers.

Font Example (view dependent on installed fonts)
Agency FB ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789
Albertina ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789
Antiqua ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789
Architect ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789
Arial ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789
BankFuturistic ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789
BankGothic ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789
Blackletter ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789
Blagovest ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789
Calibri ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789
Comic Sans MS ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789
Consolas ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789
Courier ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789
Cursive ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789
Decorative ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789
Fantasy ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789
Fraktur ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789
Frosty ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789
Garamond ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789
Georgia ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789
Helvetica ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789
Impact ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789
Minion ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789
Modern ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789
Monospace ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789
Open Sans ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789
Palatino ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789
Perpetua ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789
Roman ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789
Sans-serif ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789
Serif ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789
Script ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789
Swiss ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789
Times ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789
Times New Roman ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789
Tw Cen MT ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789
Verdana ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789

See also[edit]

Notes[edit]

  1. ^ "Fonts". W3.org. Retrieved 2013-09-21.
  2. ^ only very few web browser, including Konqueror, support this