Why we use multiple font family names & wrap font-family name with quotes in CSS

 

The font-family property is used to specifies the font for an element.

Why we use multiple font family names ?

The font-family property can hold multiple font names as a "fallback" system. If the browser does not support the first font, it tries the next font.

Example:

font-family: "Arial Narrow", Arial, Helvetica, sans-serif;

If browser does not support font-family: "Arial Narrow" then browser avoid that font name and just take the next one font for their element i.e.  Arial and so on.

Note: Separate each value of font-family with a comma.

Start with the font you want, and always end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.

Have you know that why we wrap font-family name with quotes?

If a font name contains white-space then it must be quoted. Single quotes must be used when using the "style" attribute in HTML.

Example:

font-family: "Arial Narrow", Arial, Helvetica, sans-serif;

In the above font-family name "Arial Narrow" contains white-space so it must be quoted that will help browser to understand that Arial Narrow is a single font name not two different one.