The font-family property specifies the font for text, which changes the way characters look like. There is a large variety of fonts available, some are installed on your computers while others can be downloaded or used in some other forms. It is a longhand property for font.
CSS
font-family: value;
A font name having white-spaces is always quoted. For example, "Times New Roman" should be quoted whereas there is no need to quote Arial.
You can also give more than one font name, separated by commas, so that the browser uses the second font if the first font doesn't load or is not installed in the computer. The other fonts which are given are the fallback fonts and should be chosen such that these resemble the first font (which is our first preferance). Look at the following example.
CSS
font-family: Arial, Helvetica, sans-serif;
In the above example, the browser will first use Arial. If that font is not available or couldn't be used for any reason, then it will use the second font Helvetica. If that too couldn't be used. then the browser will use a sans-serif font.
Now, sans-serif isn't the name of a font. It is the name of a generic-family which is explained below.
Generic Family
It is a set of fonts which are identical in type. To understand it better, consider the above example again. Arial and Helvetica are the names of font-families. The browser will use Helvetica if it couldn't find Arial. In case Helvetica is also not available, then the browser will choose any similar sans-serif font i.e. any font installed on the computer that is sans-serif.
It is advisable to always give a generic-family at the end so that the browser selects a font from that generic family only (sans-serif in the above case) if the previous fonts are unavailable. Otherwise, the browser will use the default font on the user's system.
The names of generic families are serif, sans-serif, cursive, fantasy, monospace.
Each of these generic families is described below along with some examples.
serif
Characters have tapering end vertices. Examples are "Adobe Jenson Pro", Albertus, Baskerville, Bodoni, Bookman, Cambria, "Copperplate Gothic", Garamond, Georgia, Palatino, "Times New Roman".
sans-serif
These do not have serifs which are small lines at the end vertices of characters. Examples are "Agency FB", Arial, "Bell Gothic", Calibri, "Century Gothic", Corbel, "Droid Sans", "Franklin Gothic", "Gill Sans", Helvetica, "Lucida Sans", Tahoma, Verdana.
cursive
These are cursive in nature with slightly italic typeface. Examples are "Apple Chancery", "Brush Script MT", "Brush Script Std", "Lucida Calligraphy", "Lucida Handwriting".
fantasy
These are decorative fonts. Examples are Blippo, Chalkduster, Impact, "Jazz LET", "Stencil Std".
monospace
These are fixed-width fonts. Examples are Courier, "Courier New", FreeMono, "OCR A Std".
Some or many of the fonts listed above may not be available on your computer. In the following example, some of the common fonts for each generic family are used.
See the Pen Font Families by Aakhya Singh (@aakhya) on CodePen.
Browser Support
This property is well supported in effectively all the browsers.
