Editing Font family (HTML)

{{short description|CSS property in HTML}}
{{HTML}}

The '''font family''' selection in [[XHTML|(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 {{tag|font}} element with its {{code|face}} attribute, and in the CSS {{code|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 [[Web typography#Generic font families|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 [[Web typography#Web fonts|custom font files]] directly by using the <code>@font-face</code> declaration. Once included, such fonts can be listed in the <code>font-family</code> property, alongside all local and fallback fonts.

== Examples ==

The following example defines the same font face ([[Times (typeface)|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 {{code|style}} attribute.
* With the [[Deprecation|deprecated]] presentational element {{tag|font}} and its non-standard attribute {{code|face}}. ({{tag|i}} is not deprecated in general, but its presentational use is.)

<syntaxhighlight lang="css">.text { font-family: times, serif; font-size:14pt; font-style:italic; }</syntaxhighlight>
<syntaxhighlight lang="html">
<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>
</syntaxhighlight>

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 ==
Although CSS tries to define a font family as the same as a typeface, the {{code|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 file]]s 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 {{code|font-family: 'Gill Sans Extrabold', 'Heisei Mincho W9'}} in place of the pedantically correct {{code|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 ==
{{main|Web typography#Generic font families}}
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.<ref name="ccs-ref">{{cite web|url=http://www.w3.org/TR/CSS2/fonts.html#generic-font-families |title=Fonts |publisher=W3.org |access-date=2013-09-21}}</ref> A [[Default (computer science)|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<ref>very few web browsers, including [[Konqueror]], support changing Cursive</ref> 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.<ref>{{cite web |title=Font Technology - Globalization |url=https://docs.microsoft.com/en-us/globalization/input/font-technology |website=docs.microsoft.com |date=31 January 2022 |language=en-us}}</ref> These families are not generic in the CSS sense, and are generally not handled at the browser level.

== See also ==
*[[Core fonts for the Web]]
*[[List of typefaces]]
*[[Font color|Presentational markup]]
*[[Web typography]]

== Notes ==
<references/>

{{DEFAULTSORT:Font family}}
[[Category:HTML]]
[[Category:Typesetting]]