Font family (HTML)

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 presentation attributes of a font may be applied in HTML code in either cascading style sheets (CSS) or the deprecated HTML 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>

When using CSS to apply a font whose name has whitespace in it, use quotes or single quotes to delimit the name.

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

In CSS, a font-family (or face in HTML) 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 on the system on which it operates, 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 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.

Generic fonts

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, always displays serif and Times as Times New Roman, and sans-serif and Helvetica as Arial.

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

Font	Example (dependent on installed fonts)
Agency FB	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	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
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

• Core fonts for the Web
• List of typefaces
• Presentational markup
• Web typography

Notes

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