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 9 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 ; A font face is the unique combination of a specific font family, and some of its members properties.
A font face attribute, combined with other font presentation attributes may be applied in the HTML using the deprecated font element.
.text


Sample text formatted with CSS in a separate stylesheet.



Sample text formatted with inline CSS.



Sample text formatted with the deprecated FONT tag.



A best practice for CSS font-family values is to delimit each in quotes as values with whitespace require it.
.text
In CSS, a font-family is a preferentially ordered list of font families to use when rendering text. 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 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

The font-family can use a specific named font, 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. 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' are easily configurable by user in web browsers.
FontExample
Agency FBABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык
AlbertinaABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык
AntiquaABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык
ArchitectABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык
ArialABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык
BankFuturisticABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык
BankGothicABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык
BlackletterABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык
BlagovestABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык
CalibriABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык
Comic Sans MSABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык
ConsolasABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык
CourierABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык
CursiveABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык
DecorativeABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык
FantasyABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык
FrakturABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык
FrostyABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык
GaramondABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык
GeorgiaABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык
HelveticaABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык
ImpactABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык
MinionABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык
ModernABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык
MonospaceABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык
Open SansABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык
PalatinoABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык
PerpetuaABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык
RomanABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык
Sans-serifABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык
SerifABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык
ScriptABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык
SwissABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык
Tahoma ??ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык
TimesABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык
Times New RomanABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык
Tw Cen MTABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык
VerdanaABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык