Font family (HTML)

From Wikipedia, the free encyclopedia
Jump to navigation Jump to search

The font family selection in (X)HTML, CSS, and derived systems specifies 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. The family selection is available in two forms: in the deprecated (X)HTML <font>...</font> element with its face attribute, and in the CSS font-family property.

The CSS term font family is matched with the typographical term typeface, which is a grouping of fonts defined by shared design styles. A font is a particular set of glyphs (character shapes), differentiated from other fonts in the same family by additional properties such as stroke weight, slant, relative width, etc. The CSS term font face is matched with "font"; it is decided by a combination of the font family and the additional properties.

In both HTML and CSS, the list is separated by commas. To avoid unexpected results, the last font family on the font list should be one of the generic families which are by default always available. 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.

Examples[edit]

The following example defines the same font face (Times or a default serif, 14 points, italics) in three ways:

  • With CSS in a separate stylesheet.
  • With inline CSS applied to an element via the style attribute.
  • With the deprecated presentational element <font>...</font> and its non-standard attribute face. (<i>...</i> is not deprecated in general, but its presentational use is.)
.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>

It is a best practice to put a space after the comma, and to put any name containing spaces between quotation marks.

Font name as family name[edit]

Although CSS tries to define a font family as the same as a typeface, the font-family entry and its non-standard HTML predecessor has also historically been used to identify the entire font face. This usage is due to font files not describing themselves as part of a family, partially motivated by the fact that few editors at the time supported the selection among more than four font styles (bold/regular and italics/regular).

As a result, it used to be common to see declarations such as font-family: 'Gill Sans Extrabold', 'Heisei Mincho W9' in place of the pedantically correct font-family: 'Gill Sans', 'Heisei Mincho'; font-weight: 900. Neither CSS2 nor CSS3 endorse such a use (they are not found in examples), but most browsers accept them as valid "names" nevertheless.

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 as Times New Roman, and both sans-serif 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.

Many systems also perform special-cased font substitution to replace missing "well-known" families with metric-compatible alternatives. For example, Windows substitutes Helvetica with Arial, and Times with Times New Roman.[3] These families are not generic in the CSS sense, and are generally not handled at the browser level.

Font family samples[edit]

The following table is a sample of some generic families in CSS. The rows in pink are non-standard and should not be used.

Font Example (view dependent on installed fonts) [caps, sentence, numerals, Greek, Arabic, Russian]
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 αβγ عربي язык
Monospace 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 αβγ عربي язык

The following table is a sample of some typefaces specified in CSS. In the case where a typeface is released under multiple "font family" names, additional names are chained in the fallback.

Font Example (view dependent on installed fonts) [caps, sentence, numerals, Greek, Arabic, Russian]
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 αβγ عربي язык
Noto Sans Javanese ꦧꦱꦗꦮ
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 αβγ عربي язык
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 αβγ عربي язык
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 αβγ عربي язык
Swiss ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык
Tahoma ?? 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. ^ very few web browsers, including Konqueror, support changing Cursive
  3. ^ "Font Technology - Globalization". docs.microsoft.com.