Font-family - Property CSS

font-family

Summary of characteristics of the `font-family` property

Quick description

Selects a font from those that are available or downloaded.

Status

Standard

Usable for

HTML, SVG

Predefined values

Percentages

Not applicable.

Initial value

Variable suivant le navigateur.

Inherited by default

Yes.

Animation type

Discrète : during an animation, the font-family property passes from one value to another without transition.

W3C Module

CSS Fonts Module

References (W3C)

🡇

🡅

CSS Fonts Module Level 5

Document status: WD (Working Draft)

CSS Fonts Module Level 4

Document status: WD (Working Draft)

CSS Fonts Module Level 3

Document status: REC (Recommendation)

Cascading Style Sheets Level 2 - Revision 1 Specification

Document status: REC (Recommendation)

Cascading Style Sheets specification - Version 1

Document status: DEPR (Old specification, declared obsolete or superseded)

Syntax diagram of `font-family`.

Syntax diagram of the font-family property
The links in the diagram provide access to more details.
Download the diagram in SVG

On the diagram, the terms in bold are the predefined words of CSS, the other terms are described below:

string is the name of a typeface (recommended apostrophes or quotation marks).
Several fonts can be specified, separated by commas.

Description of the `font-family` property.

font-family sets the font for the element. Several fonts can be specified, separated by commas: the browser will use the first one that is available on the computer. It is recommended that you end this list with a generic font (a font that all browsers are supposed to interpret as best as possible).


	font-family: 'Arial', 'Helvetica', sans-serif;

Careful! Font names can be enclosed in single quotes or quotation marks, especially if they contain spaces. But the names of generic fonts should NOT be enclosed in single quotes or quotation marks.

It is also possible to define a custom font that will be downloaded by the browser. We can thus be sure that the restitution will be faithful. This can be done with the @font-face , or a link tag added in the head section of the page.

If you want more information about font formats, see the font property.

Use of `font-family` as a descriptor.

The word font-family matches the property described on this page, but can also be a descriptor that can be used with the following directives:

@font-face : Defines all settings for a downloadable font.
@font-palette-values : Defines a color palette that can then be applied to a font.

General values for `font-family`.

font-family: 'Arial', sans-serif;

If the Arial typeface is available on the user's computer, it will be the font used for that element. Multiple fonts can be listed, separated by commas. The browser chooses the first one that is available on the user's computer. It is strongly recommended that you end this list with a generic font (see below).

Apostrophes around the font name are recommended and required if the font name contains spaces or may be confusing with the name of a generic font. However, the generic font that ends the list must NOT be specified in quotation marks or apostrophes.

Generic fonts.

font-family: serif;

Serif typefaces, in the style of Times, Times New Roman, Book Antiqua, etc.
These fonts are usually proportionally spaced (the width of each letter is not identical) and present variations in the thickness of the lines (full and thin).

Example: The quick brown fox jumps over the lazy dog.
font-family: sans-serif;

Characters without serifs, in the style of Arial, Helvetica, etc.
These fonts are in principle without variation in the thickness of the strokes (no full and thin lines) or variations very low. They are proportionally spaced.

Example: The quick brown fox jumps over the lazy dog.
font-family: cursive;

Font whose character shape is reminiscent of handwriting, in the style of Brush Script.

Example: The quick brown fox jumps over the lazy dog.
font-family: fantasy;

As the name suggests, it is a decorative font. As this definition is relatively vague, the rendering from one machine to another can be very different depending on the fonts installed on the machine.

Example: The quick brown fox jumps over the lazy dog.
font-family: monospace;

Fixed-spaced font: All characters are the same width. In the genre of courrier, Lucida Console, etc.
These fonts can be useful when there is a need to align numbers into columns or to display computer code.

Example: The quick brown fox jumps over the lazy dog.
font-family: emoji;

Font including pictograms and graphic symbols such as smileys.

😀 😁 😂 😃 😄 😇 😈
(a few characters in the range 1F600 to 1F97F)
font-family: math;

Font with math symbols.

∛ ∞ ∮ ≈ ⋶
(a few characters from the range 2200 to 22FF)

System fonts.

Generic fonts are, as far as possible, associated with a system font that has the necessary characteristics (presence of serifs, rounded characters, etc.). If such a font is not found, the browser offers a default font.

font-family: system-ui;

The default font of the operating system. This generic font is used to make the document look the same as the system.

Example: The quick brown fox jumps over the lazy dog.
font-family: ui-serif;

Serif font The serif font used by the operating system.

Example: The quick brown fox jumps over the lazy dog.
font-family: ui-sans-serif;

A sans serif font used by the operating system.

Example: The quick brown fox jumps over the lazy dog.
font-family: ui-monospace;

A fixed-spaced font used by the operating system.

Example: The quick brown fox jumps over the lazy dog.
font-family: ui-rounded;

A font with rounded characters, used by the operating system.

Example: The quick brown fox jumps over the lazy dog.
font-family: generic(fangsong); font-family: generic(kai); font-family: generic(nastaliq);

Font dealing with certain peculiarities related to the Chinese script.
- fangsong: Writing often used for official Chinese government documents.
- kai: A font family used in Simplified and Traditional Chinese.
- nastaliq: font family that corresponds to the standard way of writing Urdu and Kashmiri, but can be used equally in Persian script or some other languages.
These fonts are rarely installed on computers that are not specific to the CJK languages.
font-family: initial; (Variable suivant le navigateur.) font-family: inherit; font-family: revert; font-family: revertLayer; font-family: unset;

Common values are presented on these pages: initial, inherit, revert, revert-layer, unset.

Downloadable fonts.

When very specific fonts are used on a page, one can be fairly sure that they are will not be available on the computer of all Internet users. You can then request the download of this font so that the rendering is faithful on all machines.

Loading a typeface can be done in a number of ways. First, in pure CSS, with the @font-face directive. It is possible to specify certain characteristics of the font (in our example it is a bold font):


	@font-face {
	   font-family:'My Font';
	   src:url('https://domain/path/font-bold.ttf');
	   font-weight:bold;
	}

Google Fonts can also be downloaded with a link tag in the page header. In the example below, "Sofia" is the name of the font.


	<link href="https://fonts.googleapis.com/css?family=Sofia" rel="stylesheet">

Or, again for Google Fonts, a @import directive in the styles sheet. Note that these codes (link tag or @import directive) are automatically generated by Google Fonts depending on the fonts you select.


	@import url('https://fonts.googleapis.com/...');

You can then use the downloaded font with the font-family property:


	font-family:'Sofia';

See also the descriptor font-display which allows you to define the behavior of the browser during the loading time or if it is impossible to load the latter.

Google provides web developers with many fonts that can be used freely (Apache or SIL OFL (Open Font License)).
See the impressive list and samples of Google fonts.

Example of animation of `font-family`.

The font-family property can be animated. Of course, the transition from one policy to another will be done in a brutal way, since it is not a numerical value.

The quick brown fox jumps over the lazy dog

Manipulating the `font-family` property programmatically.

Javascript can change the value of the CSS property font-family, just like all other properties. Just be careful not to confuse quotation marks or apostrophes that are part of the Javascript syntax, and those that surround the font name in CSS. Several fairly simple solutions exist since CSS and Javascript accept indifferently quotation marks and apostrophes. In our examples, we chose to use the apostrophe as the delimiter for CSS and the quotation mark as the delimiter for Javascript. Note: The problem does not arise for generic fonts since, in CSS, their name must be written without quotation marks or apostrophes.

With Javascript, change the value of `font-family`.

Javascript recognizes two syntaxes. In the first one, the name of the property is written with a hyphen to separate the words, as in CSS. In the second, it is a capital letter that separates the words.


	let el = document.getElementById('id');
	el.style['font-family'] = "'Times New Roman'";
	// or
	let el = document.getElementById('id');
	el.style.fontFamily = "'Times New Roman'";

With Javascript, read the value of `font-family`.

Here's a sample Javascript code that returns the value of the font-family property when set in the HTML code, via the style attribute of the element. If the property was set via a CSS selector, its value is not found by this code (for this see the code below).


	let el = document.getElementById('id');
	let value = el.style['font-family'];
	// or
	let el = document.getElementById('id');
	let value = el.style.fontFamily;

With Javascript, read the calculated value of `font-family`.

The calculated value is the value resulting from the evaluation of the cascade of inheritances. It is always defined: it can be the value assigned directly via a CSS selector or the style attribute, an inherited value, or as a last resort, the initial value of the property.


	let el = document.getElementById('id');
	let value = window.getComputedStyle(el).getPropertyValue('font-family');

With JQuery, change the value of `font-family`.

As in Javascript, the name of the property can be written in kebab-case or camel-case.


 $('#id').css('font-family', "'Times New Roman'");
 // or
 $('#id').css('fontFamily', "'Times New Roman'");

With JQuery, read the calculated value of `font-family`.


	let value = $('#id').css('font-family');

Test it yourself.

The buttons below apply the entered value to the font-family property and then display the applied value or calculated value. The latter allows you to see how the value of font-family is stored (serialized).

Simulator.

font-family :

The quick brown fox jumps over the lazy dog

Browser compatibility.

The font-family property by itself is not a compatibility issue. However, it is necessary to be vigilant about the font choice: some generic fonts are poorly recognized or system-dependent.

Column 1

Recognizes and processes the font-family property.

Column 2

Recognizes the math value for the font-family property.

Column 3

Support for the system-ui font representing the default operating system font.

Column 4

Supports system properties starting with ui: ui-serif, ui-sans-serif, ui-monospace, ui-rounded...

font-family
property

math
value

system-ui
value

ui...
values

Estimated overall support.

96%

75%

97%

17%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

KaiOS Browser

Opéra Mobile

Opéra

Safari

Safari sur IOS

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

`font-family` property historic.

The font-family property is old (already present in the first CSS specification), but the accepted values have evolved a lot: introduction of more and more generic and system fonts.

Cascading Style Sheets specification - Version 1

Initial property definition, with the following predefined values: serif, sans-serif, cursive, fantasy et monospace.

November 17, 1995
Working Draft.
November 12, 1996
Proposed for recommendation.
December 17, 1996
Recommendation .
September 13, 2018
Old specification, declared obsolete.
Cascading Style Sheets Level 2 - Revision 1 Specification

Support of the inherit value.

November 04, 1997
Working Draft.
March 24, 1998
Proposed for recommendation.
May 11, 1998
Recommendation .
CSS Fonts Module Level 3

No change regarding font-family.

July 21, 1997
Working Draft.
October 03, 2013
Candidate Recommendation.
August 14, 2018
Proposed for recommendation.
September 20, 2018
Recommendation .
CSS Fonts Module Level 4

System font support: caption, icon, menu, etc.

July 11, 2017
Working Draft.
CSS Fonts Module Level 5

Adding new generic fonts: math, generic(), ui....

June 29, 2021
Working Draft.