Font family (HTML)

Last updated September 24, 2023

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 ... 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

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 ... and its non-standard attribute face. (... is not deprecated in general, but its presentational use is.)

.text{font-family:times,serif;font-size:14pt;font-style:italic;}

<pclass="text"> Sample text formatted with CSS in a separate stylesheet. </p><pstyle="font-family: times, serif; font-size:14pt; font-style:italic"> Sample text formatted with inline CSS. </p><p><i><fontface="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

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

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.

Notes

↑ "Fonts". W3.org. Retrieved 2013-09-21.
↑ very few web browsers, including Konqueror, support changing Cursive
↑ "Font Technology - Globalization". docs.microsoft.com. 31 January 2022.

Related Research Articles

The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It defines the meaning and structure of web content. It is often assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.

A typeface is a design of letters, numbers and other symbols, to be used in printing or for electronic display. Most typefaces include variations in size, weight, slope, width, and so on. Each of these variations of the typeface is a font.

<span class="mw-page-title-main">Arial</span> Neo-grotesque sans-serif typeface

Arial is a sans-serif typeface and set of computer fonts in the neo-grotesque style. Fonts from the Arial family are included with all versions of Microsoft Windows after Windows 3.1, as well as in other Microsoft programs, Apple's macOS, and many PostScript 3 printers.

An HTML element is a type of HTML document component, one of several types of HTML nodes. The first used version of HTML was written by Tim Berners-Lee in 1993 and there have since been many versions of HTML. The most commonly used version is HTML 4.01, which became official standard in December 1999. An HTML document is composed of a tree of simple HTML nodes, such as text nodes, and HTML elements, which add semantics and formatting to parts of document. Each element can have HTML attributes specified. Elements can also have content, including other elements and text.

<span class="mw-page-title-main">Tahoma (typeface)</span> Humanist sans-serif font

Tahoma is a humanist sans-serif typeface that Matthew Carter designed for Microsoft Corporation. Microsoft first distributed it, along with Carter's Verdana, as a font with Office 97.

In digital typography, Lucida Sans Unicode OpenType font from the design studio of Bigelow & Holmes is designed to support the most commonly used characters defined in version 1.0 of the Unicode standard. It is a sans-serif variant of the Lucida font family and supports Latin, Greek, Cyrillic and Hebrew scripts, as well as all the letters used in the International Phonetic Alphabet.

Lucida is an extended family of related typefaces designed by Charles Bigelow and Kris Holmes and released from 1984 onwards. The family is intended to be extremely legible when printed at small size or displayed on a low-resolution display – hence the name, from 'lucid'.

<span class="mw-page-title-main">Lucida Grande</span> Font

Lucida Grande is a humanist sans-serif typeface. It is a member of the Lucida family of typefaces designed by Charles Bigelow and Kris Holmes. It is best known for its implementation throughout the macOS user interface from 1999 to 2014, as well as in other Apple software like Safari for Windows. As of OS X Yosemite, the system font was changed from Lucida Grande to Helvetica Neue. In OS X El Capitan the system font changed again, this time to San Francisco.

<span class="mw-page-title-main">Corbel (typeface)</span> Typeface

Corbel is a humanist sans-serif typeface designed by Jeremy Tankard for Microsoft and released to consumers in 2007. It is part of the ClearType Font Collection, a suite of fonts from various designers released with Windows Vista. All start with the letter C to reflect that they were designed to work well with Microsoft's ClearType text rendering system, a text rendering engine designed to make text clearer to read on LCD monitors. The other fonts in the same group are Calibri, Cambria, Candara, Consolas and Constantia.

Oblique type is a form of type that slants slightly to the right, used for the same purposes as italic type. Unlike italic type, however, it does not use different glyph shapes; it uses the same glyphs as roman type, except slanted. Oblique and italic type are technical terms to distinguish between the two ways of creating slanted font styles; oblique designs may be labelled italic by companies selling fonts or by computer programs. Oblique designs may also be called slanted or sloped roman styles. Oblique fonts, as supplied by a font designer, may be simply slanted, but this is often not the case: many have slight corrections made to them to give curves more consistent widths, so they retain the proportions of counters and the thick-and-thin quality of strokes from the regular design.

<span class="mw-page-title-main">Century Gothic</span> Sans-serif font family

Century Gothic is a digital sans-serif typeface in the geometric style, released by Monotype Imaging in 1991. It is a redrawn version of Monotype's own Twentieth Century, a copy of Bauer's Futura, to match the widths of ITC Avant Garde Gothic. It is an exclusively digital typeface that has never been manufactured as metal type.

In metal typesetting, a font is a particular size, weight and style of a typeface. Each font is a matched set of type, with a piece for each glyph. A typeface consists of various fonts that share an overall design.

Font substitution is the process of using one typeface in place of another when the intended typeface either is not available or does not contain glyphs for the required characters.

<span class="mw-page-title-main">Monotype Grotesque</span> Grotesque sans-serif typeface

Monotype Grotesque is a family of sans-serif typefaces released by the Monotype Corporation for its hot metal typesetting system. It belongs to the grotesque or industrial genre of early sans-serif designs. Like many early sans-serifs, it forms a sprawling family designed at different times.

Liberation is the collective name of four TrueType font families: Liberation Sans, Liberation Sans Narrow, Liberation Serif, and Liberation Mono. These fonts are metrically compatible with the most popular fonts on the Microsoft Windows operating system and the Microsoft Office software package, for which Liberation is intended as a free substitute. The fonts are default in LibreOffice.

Web typography, like typography generally, is the design of pages – their layout and typeface choices. Unlike traditional print-based typography, pages intended for display on the World Wide Web have additional technical challenges and – given its ability to change the presentation dynamically – additional opportunities. Early web page designs were very simple due to technology limitations; modern designs use Cascading Style Sheets (CSS), JavaScript and other techniques to deliver the typographer's and the client's vision.

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

HTML attributes are special words used inside the opening tag to control the element's behaviour. HTML attributes are a modifier of a HTML element type. An attribute either modifies the default functionality of an element type or provides functionality to certain element types unable to function correctly without them. In HTML syntax, an attribute is added to a HTML start tag.

A reset stylesheet is a collection of CSS rules used to clear the browser's default formatting of HTML elements, removing potential inconsistencies between different browsers. It also prevents developers from unknowingly relying on the browser default styling and force them to be explicit about the styling they want to apply on the page.

This page is based on this Wikipedia article
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.

[ccs-ref-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. 31 January 2022.

[1]

[2]

[3]